js 定时器移动div案例

约定不等于承诺〃 2021-07-24 18:29 503阅读 0赞

主要问题:多次点击开始定时器，会开启多个不同的定时器，会改变初始移动

解决方法：在定时器函数内首部添加一个清除定时器，使得每一次点击都清除上次定时器，并重建一个定时器

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div{ 
    				height:40px;
    				width:40px;
    				background-color: orange;
    				position: absolute;
    			}
    		</style>
    	</head>
    	
    	<body>
    		
    		<button class="start">开始</button>
    		<button class="end">结束</button>
    		
    		<div class="box">
    		</div>
    			
    		<script>
    			var box=document.querySelector(".box");
    			var start=document.querySelector(".start");
    			var end=document.querySelector(".end");
    			
    			var timer=null;
    			
    			start.onclick=function(){ 
    				//解决多次点击加大移动距离的问题
    				//第一次点击timer无值，第二次点击结束上一次timer，又重建一个timer继续移动
    				clearInterval(timer);
    				
    				timer=setInterval(
    		    	function()
    		    	{ 
    		    		var x=box.offsetLeft;
    		    		x+=100;
    		    		box.style.left=x+"px";
    		    	}
    		    ,1000);
    			}
    			
    			end.onclick=function()
    			{ 
    				clearInterval(timer);
    			}
    			
    		    
    			
    			
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，503人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 19 阅读

相关 JS定时器做随机点人案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2022年12月09日 04:52/ 0 赞/ 120 阅读

相关用定时器改进div移动事件

js代码： <script type="text/javascript"> window.onload = function(){ var

女爷i/ 2022年11月29日 14:30/ 0 赞/ 140 阅读

相关 js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开这两个事件一般会绑定给可

野性酷女/ 2022年11月29日 14:29/ 0 赞/ 192 阅读

相关 Js实现div跟着鼠标的移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

旧城等待，/ 2022年06月11日 09:16/ 0 赞/ 180 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 283 阅读

相关 js实现div移动

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。首先先把格子画出来，因为想做列的移动，所以一列是一个div。 HTML： <div cl

墨蓝/ 2022年03月15日 02:26/ 0 赞/ 418 阅读

相关 JS设置div根据键盘移动

使用js设置div根据方向键“上、下、左、右”方向键移动，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

ゝ一世哀愁。/ 2022年02月21日 05:21/ 0 赞/ 270 阅读

相关 js 定时器移动div案例

主要问题:多次点击开始定时器，会开启多个不同的定时器，会改变初始移动解决方法：在定时器函数内首部添加一个清除定时器，使得每一次点击都清除上次定时器，并重建一个定时器代码

约定不等于承诺〃/ 2021年07月24日 18:29/ 0 赞/ 504 阅读

相关 js如何实现利用键盘控制div移动

js如何实现利用键盘控制div移动描述： div通过键盘事件上下左右实现div块的移动

红太狼/ 2020年06月06日 18:42/ 0 赞/ 850 阅读