1 body 2 button id="btn"开始动画/button 3 div id="box"/div 4 script 5 window.addEventListener(‘load‘, function (ev) { 6 linearAnimation(‘btn‘, ‘box‘, 50, 800 ); 7 }); 8 9 function linearAnimation(btnId, boxId, step, target)
1 <body> 2 <button id="btn">开始动画</button> 3 <div id="box"></div> 4 <script> 5 window.addEventListener(‘load‘, function (ev) { 6 linearAnimation(‘btn‘, ‘box‘, 50, 800); 7 }); 8 9 function linearAnimation(btnId, boxId, step, target) { 10 // 1. 获取需要的标签 11 var btn = document.getElementById(btnId); 12 var box = document.getElementById(boxId); 13 14 var intervalID = null, begin = 0; 15 16 // 2. 事件触发 17 btn.addEventListener(‘click‘, function (ev1) { 18 // 2.1 清除定时器 19 clearInterval(intervalID); 20 21 // 2.2 设置定时器 22 intervalID = setInterval(function () { 23 // 改变起始值 24 begin += step; 25 26 // 判断 27 if(begin >= target){ 28 begin = target; 29 // 清除定时器 30 clearInterval(intervalID); 31 } 32 console.log(begin); 33 34 // 动起来 35 box.style.marginLeft = begin + ‘px‘; 36 }, 10); 37 }); 38 } 39 </script>