<style>
#test{
width: 100px;
height: 100px;
background: red;
/* 设置动画 要使用定位 */
position: absolute;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="test" style="left: 0px;"></div>
<script>
var btn=document.getElementById("btn");
var test=document.getElementById("test")
var animated=false;
var timer =100;
btn.onclick=function(){
// 解决点击事件 叠加时出现的问题
if(animated){
animated=false;
}
function go(){
animated=true;
var leftValue =parseInt(test.style.left)+10;
test.style.left=leftValue+"px";
if(parseInt(test.style.left)<100){
setTimeout(go,timer)
}
}
go();
}
</script>
