js 定时器移动div案例

148 阅读 0 评论 98 点赞

我是靠谱客的博主大意马里奥，最近开发中收集的这篇文章主要介绍js 定时器移动div案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

代码示例：

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