JS图片加速跑图片折返跑多次点击速度加快bug处理

时间：6年前阅读：5236

这个JS效果比较单一，就是一个按钮来控制这个图片左右来回运动，这种效果在前端开发里用的可能性不会太多。但能运用到几个常用JS的基础的知识，下面开始详细举例说明：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#tt{    
				position: absolute;    
				/*left: 0px;*/    
				top: 100px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
				var tt = document.getElementById('tt');    
				var aa;//先声明一下变量，要不然下面一开始清理定时器，没有这个变量，就会报错了    
//				(因为定时器,你点多一次就会多执行一次:所以会越来越快)    
//				解决定时器叠加的思路:在设置定时器之前,先清理定时器    
//				新的加多一个变量,多了这个变量好操作(方便下面的10变灵活)    
				var yy = 10;    
//				给按钮加单击事件    
				dd.onclick = function(){    
//					先清理定时器,把如果有第二次点击的,就会回到函数先清理上一次的定时器,这样减少:点一次减一次    
					clearInterval(aa);    
//					定时器   这里直接aa设成一个局变量，因为 var aa 是局部变量会控制不到下一个点击的定时器执行的变量    
					aa=setInterval(function(){    
//					原来的值	
    
					var uu = tt.style.left;    
//					新的值    
//					var kk = parseInt(uu)+10;   原来的    
					var kk = parseInt(uu)+yy;   //现在的    
//					赋值回去    
					tt.style.left = kk+'px';    
//					判断边界    
//					if (kk==800) {    
////						定时器是不会停止的,当运动到800的时候,开始+-10(加负值),减10往回走    
//						yy = -10;    
//					}    
//					else if(kk==0){    
////						当往回走到0时,又变成加10往走    
//						yy= 10;    
//					}    
//					也可以这样写  正负值区分，负负得正，正负得负。    
//					if (kk==800) {    
////					本来yy就是等于正10的，乘以负数，等于-10    
//						yy = yy*-1;    
//					}    
//					else if(kk==0){    
////						当往回走到0时,又变成加10往走 ##上面的一步yy变-10了，现在再乘以负1，负负得正##变成正10又往前走了    
//						yy= yy*-1;    
//					}    
//					
    
//					再精减代码    
					if (kk==800 || kk==0) {    
//						来回反转    
						yy=yy*-1;    
					}    
				},100)    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="一点就跑!" />    
		<br /><br />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903161552740859142134.gif" alt="" id="tt" style="left: 0px;"/>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS图片加速跑 图片折返跑 多次点击速度加快bug处理

网友评论

JS图片加速跑图片折返跑多次点击速度加快bug处理