js运动技术--匀速运动

最新推荐文章于 2020-07-19 22:14:48 发布

柏油

最新推荐文章于 2020-07-19 22:14:48 发布

阅读量364

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/74937550

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;top: 50px;left: 0px;position: absolute;}//position必须是absolute
		</style>
		<script>
			var times;
			window.onclick = function(){
				var oBtn = document.getElementById("btn1");
				var oDiv = document.getElementById("div1");	
			
				oBtn.onclick = function(){
					var speed = 4;
					
					clearInterval(times);//保证多次点击时同一时间只有一个定时器响应
					
					times = setInterval(function(){
						if(oDiv.offsetLeft < 500 ){
						oDiv.style.left = oDiv.offsetLeft + speed + 'px';							
						}
						else{
							clearInterval(times);
						}
					},30);
				};
			}
		</script>
	</head>
	<body>
		<input id = "btn1" type = "button" value = "开始运动"/><br><br>
		<div id = "div1">
		</div>
	</body>
</html>

2、匀速运动的停止条件：绝对值函数abs的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;top: 50px;left: 0px;position: absolute;}
		</style>
		<script>
			var times;
			window.onclick = function(){
				var oBtn = document.getElementById("btn1");
				var oDiv = document.getElementById("div1");	
			
				oBtn.onclick = function(){
					var speed = 7;
					
					clearInterval(times);//保证多次点击时只有一个定时器响应
					
					times = setInterval(function(){
						if(oDiv.offsetLeft == 500 ){
							clearInterval(times);							
						}
						else if(Math.abs(oDiv.offsetLeft - 500) < 7){
							oDiv.style.left = 500 + 'px';
						}else {
							oDiv.style.left = oDiv.offsetLeft + speed + 'px';
						}
					},30);
				};
			}
		</script>
	</head>
	<body>
		<input id = "btn1" type = "button" value = "运动到500"/><br><br>
		<div id = "div1">
		</div>
		<div style="left: 500px;width: 1px;height: 400px;background: black;position: absolute;"></div>
	</body>
</html>