d3.js 使用定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TEST-5</title>
		<script src="https://d3js.org/d3.v4.js"></script>
		<style type="text/css">
			.countdown {
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>

		<script>
			
			const body = d3.select('body')
			
			const input = body.append('div').append('input')
			
			input.attr('type', 'button')
				 .attr('class', 'countdown')
				 .attr('value', '0')
			
			function countUp(target) {
				const t = d3.timer(function() {
					var value = input.attr('value')
					if(value == target) {
						t.stop()
						return true
					}
					input.attr('value', ++value)
				})
			}
			
			// function countUp(target) {
			// 	input.transition()
			// 		 .duration(1500)
			// 		 .attr('value', 100)
			// }
			
			function reset() {
				input.attr('value', 0)
			}
			
		</script>
		
		<div class='control-group'>
			<button οnclick="countUp(100)">Start</button>
			<button οnclick="reset()">Clear</button>
		</div>
		
		
	</body>
</html>

来源：CSDN

作者：Tong XU

链接：https://blog.csdn.net/qq_41700374/article/details/103709700

标签

数码

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!