定时器其实是Timing事件,在制定的时间内执行代码达到一些效果。
setTimeout(函数,毫秒数):
在指定的毫秒数后执行函数,可以看成一个延迟效果。
setInterval(函数,间隔毫秒数):
在
setTimeout()
基础上重复执行此函数
clearTimeout(setTimeout返回的变量):
停止执行
setTimeout()
clearInterval(setInterval返回的变量):
用定时器达到transition效果:
<div class="main" id="mydiv"></div>
transition:
.main{
background-color: red;
width: 100px;
height: 100px;
margin-top: 100px;
transition: transform 0.5s linear,background-color 0.5s linear;
}
.main:hover{
background-color: blue;
transform: translateX(200px);
}
定时器:
<script>
var mydiv=document.getElementById("mydiv");
var t=null;//前进定时器
var b=null;//后退定时器
document.getElementById("btn").onclick=function (){
t=setInterval(move,50);
function move(){
clearInterval(b);
mydiv.style.marginLeft=mydiv.offsetLeft+10+"px";
if(parseInt(mydiv.style.marginLeft)>200)
{
clearInterval(t);
b=setInterval(back,50);
}
}
function back()
{
clearInterval(t);
mydiv.style.marginLeft=mydiv.offsetLeft-10+"px";
if(parseInt(mydiv.style.marginLeft)<1)
{
clearInterval(b);
t=setInterval(move,50);
}
}
}
</script>