第三十节 JavaScript定时器动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器动画</title>
 6     <script type="text/javascript">
 7         window.onload = function(){        
 8             var oDiv = document.getElementById('div1');
 9             // oDiv.style.backgroundColor = 'green';
10             var i = 0
11             var timer01 = setInterval(function(){
12                 i+=20;
13                 oDiv.style.left = i+ 'px';
14                 if (i>960) {
15                     clearInterval(timer01)
16                 }
17             },10)
18         }
19 
20     </script>
21     <style type="text/css">
22         .box{
23             width: 200px;
24             height: 300px;
25             background-color: gold;
26             position: absolute;
27             left: 0px;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="box" id="div1"></div>
33 </body>
34 </html>