js运动技术--匀速运动

- 日理万妓 2024-02-17 23:09 60阅读 0赞

<!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>