JavaScript--定时器/实例（时钟/倒计时）

定时器

定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流 ---------------------见实例-整屏滚动 

定时器类型及语法 

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>定时器弹框</title>
 9 
10     <script type="text/javascript">
11         /*
12         function alert1(){
13             alert('hh');
14         }
15         setTimeout(alert1,3000); //延迟3秒弹出alert
16         */
17 
18         window.onload=function(){
19             var oPop=document.getElementById('pop');
20             var oClose=document.getElementById('closeoff');
21 
22             /*
23             setTimeout(showpop,3000);
24 
25             function showpop(){
26                 oPop.style.display='block';
27             }
28             */
29 
30             //定时器简写
31             setTimeout(function(){
32                 oPop.style.display='block';
33             }
34             ,3000)
35 
36             oClose.onclick=function(){
37                 oClose.style.display=none;
38             }
39 
40         }
41 
42     </script>
43 
44     <style type="text/css">
45         .pop_con{
46             display:none;
47         }
48 
49         .pop{
50             width:400px;
51             height:300px;
52             background-color:#fff;
53             border:1px solid #000;
54             position:fixed;
55             left:50%;
56             top:50%;
57             margin-top:-150px;
58             margin-left:-200px;
59             z-index:999;  #设置层级
60         }
61 
62         .mask{
63             width:100%;
64             height:100%;
65             background-color:#000;
66             position:fixed;
67             left:0;
68             top:0;
69             opacity:30%; #设置透明度
70             z-index:990;  #设置层级
71         }
72 
73     </style>
74 
75 </head>
76 <body>
77 
78     <h1>首页标题</h1>
79     <p>页面内容</p>
80 
81     <div class="pop_con" id="pop">
82         <div class="pop">
83             <h3>提示信息！</h3>
84             <a href="" id="closeoff">关闭</a>
85         </div>
86 
87         <div class="mask"></div>
88     </div>
89 
90 </body>
91 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>定时器</title>
 9 
10     <script type="text/javascript">
11         var timer1=setTimeout(function(){
12             alert('hello')
13         }
14         ,3000)
15 
16         clearTimeout(timer1) //清除定时器
17 
18         var timer2=setInterval(function(){   //循环定时器
19             alert('hi')
20         }
21         ,3000)
22 
23         clearInterval(timer2);  //清除循环定时器
24 
25     </script>
26 </head>
27 <body>
28 
29 </body>
30 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>倒计时动画</title>
 9 
10     <style type="text/css">
11         .box{
12             width:100px;
13             height:100px;
14             background-color:gold;
15             position:fixed;
16             left:10px;
17             top:10px;
18         }
19     </style>
20 
21     <script type="text/javascript">
22         window.onload=function(){
23             var oBox=document.getElementById('box');
24             var left=10;
25 
26             var timer=setInterval(function(){
27                 left+=2;
28                 oBox.style.left=left+'px';
29 
30                 if(left>700){
31                     clearInterval(timer)
32                 }
33             },100)
34         }
35     </script>
36 </head>
37 <body>
38 <div class="box" id="box"></div>
39 
40 </body>
41 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>时钟</title>
 9 
10     <script type="text/javascript">
11         window.onload=function(){
12             var oBox=document.getElementById('box');
13 
14             timego(); //为了解决倒计时晚一秒才出现的问题，才加了这一句
15             setInterval(timego,1000);
16 
17             function timego(){
18                 var now=new Date();
19                 var year=now.getFullYear();
20                 var month=now.getMonth()+1;
21                 var date=now.getDate();
22                 var week=now.getDay();
23                 var hour=now.getHours();
24                 var minute=now.getMinutes();
25                 var second=now.getSeconds();
26 
27                 oBox.innerHTML='当前时间是:'+year+'年'+todou(month)+'月'+todou(date)+'日'+' '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);  //通过 innerHTML可以读写元素包括的内容
28             }
29 
30             function toweek(num){ 
31                 switch(num){
32                     case 0:
33                         return '星期日';
34                         break;
35                     case 1:
36                         return '星期一';
37                         break;
38                     case 2:
39                         return '星期二';
40                         break;
41                     case 3:
42                         return '星期三';
43                         break;
44                     case 4:
45                         return '星期四';
46                         break;
47                     case 5:
48                         return '星期五';
49                         break;
50                     case 6:
51                         return '星期六';
52                         break;
53                 }
54             }
55 
56             function todou(num){
57                 if(num<10){
58                     return '0'+num;
59                 }
60                 else{
61                     return num;
62                 }
63             }
64         }
65     </script>
66 </head>
67 <body>
68 
69 <div id="box"></div>
70 
71 </body>
72 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>倒计时</title>
 9 
10     <script type="text/javascript">
11         window.onload=function(){
12             var oDiv=document.getElementById('div1');
13 
14             function timeleft(){
15                 var now=new Date();
16                 var future=new Date(2019,11,20,14,0,0);
17                 var lefts=parseInt((future-now)/1000);
18                 var day=parseInt(lefts/86400);
19                 var hour=parseInt((lefts%86400)/3600);
20                 var minute=parseInt(((lefts%86400)%3600)/60);
21                 var second=lefts%60;
22 
23                 if(lefts<=0){
24                     window.location.href='http://www.baidu.com'; //重定向地址
25                 }
26 
27                 oDiv.innerHTML = '距离2016年12月10日晚24时还有'+day+'天'+todou(hour)+'时'+todou(minute)+'分'+todou(second)+'秒';
28                 }
29 
30                 timeleft();
31                 setInterval(timeleft,1000);
32 
33             function todou(num){
34                 if(num<10){
35                     return '0'+num;
36                 }
37                 else{
38                     return num;
39                 }
40             }
41         }
42 
43     </script>
44 
45 </head>
46 <body>
47 
48 <div id="div1"></div>
49 </body>
50 </html>

posted on 2019-12-18 20:59  cherry_ning  阅读(589)  评论(0)    收藏  举报

导航