匀速运动点击停止

最新推荐文章于 2022-03-30 17:32:18 发布

原创最新推荐文章于 2022-03-30 17:32:18 发布

· 166 阅读

0 ·

版权

运动专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			position: absolute;
			left: 0px;
			top: 200px;
		}
	</style>
	<body>
		<input type="button" value="点击" />
		<div></div>
	</body>
</html>
<script type="text/javascript">
	var btn = document.getElementsByTagName('input')[0];
	var box = document.getElementsByTagName('div')[0];
	
	var flag = true;  //控制器
	btn.onclick = function(){
		
		if(flag){    //第一次为true 执行一次
			animate(box,300);
			flag = false;  //控制第二次点击，为清除定时器操作
		}else{
			clearInterval(timer);    //清除定时器操作
			flag = true;   //下一次点击执行
		}
	}
	
	
	var timer;
	function animate(obj,target){
		clearInterval(timer);
		timer = setInterval(function(){
			var speed = target - obj.offsetLeft > 0 ? 5 : -5;
			if(obj.offsetLeft == target){
				clearInterval(timer);
			}else{
				obj.style.left = obj.offsetLeft + speed + 'px';
			}
		},30)
	}
	
</script>