JS定时器相关用法

一、定时器在javascript中的作用

1、制作动画
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用定时器制作动画</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background: #ffb8f9;
11             position: fixed;
12             left:20px;
13             top:20px;
14         }
15     </style>
16     <script>
17         window.onload = function(){
18             var left=20;
19             var oBox = document.getElementById('box');
20             var timer = setInterval(function(){
21                 if(left>700){
22                     clearInterval(timer);
23                 }
24                 left++;
25                 oBox.style.left = left+'px';
26             },30);
27         }
28 
29     </script>
30 </head>
31 <body>
32     <div class="box" id="box"></div>
33 </body>
34 </html>
View Code