您的位置：首页 > 其它

setInterval和settimeout简单动画区别

2016-07-14 00:00 513 查看
<style>
#box1{
position:absolute;
width:50px;
height:50px;
left:100px;
top:150px;
background:#666666
}
#box2{
position:absolute;
width:50px;
height:50px;
left:100px;
top:250px;
background:#666666
}
</style>
<script type="text/javascript">
window.onload=function(){
setTimeout(function(){ //只执行一次
var box1=document.getElementById('box1');
var left1=parseInt(GetStyle(box1,'left'));
box1.style.left=left1+1+'px';
},2000);
var time=setInterval(function(){ //会一直执行 到500停止
var box2=document.getElementById('box2');
var left2=parseInt(GetStyle(box2,'left'));
box2.style.left=left2+1+'px';
if(left2==500){
clearInterval(time);
}
},20);
//获取css的type属性
function GetStyle(element,type){
if(element.currentStyle) {
return element.currentStyle[type]
}else if(window.getComputedStyle) {
return window.getComputedStyle(element , null)[type];
}
}

}
</script>
</head>

<body>
<div id="box1"> </div>
<div id="box2"> </div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航