JavaScript 倒计时器，闹钟功能 

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>js实现倒计时</title>
 6    <style>
 7        div{
 8         position:absolute;
 9         width:400px;
10         height:50px;
11         left:50%;
12         top:50%;
13  
14   
15     }
16 
17 
18 
19 span {
20       text-align: center;
21       font-size:40px;
22 }
23 
24    </style>
25   </head>
26   <body>
27  
28   
29     <div id="container">
30       
31       <span id="demo"></span>
32     
33   
34     </div>
35   </body>
36 <script>
37       
38 function clock(mytime){
39     
40     //设置要倒计时的时间
41     var stime=new Date(mytime).getTime();
42   // 获取目前的时间
43     var ntime=new Date().getTime();
44     var dtime=stime-ntime;
45     
46     
47     if(dtime>0){//可以在此处设置闹钟
48      
49     var days = Math.floor(dtime / (1000 * 60 * 60 * 24));
50     var hours = Math.floor((dtime% (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
51     var minutes = Math.floor((dtime % (1000 * 60 * 60)) / (1000 * 60));
52     var seconds = Math.floor((dtime % (1000 * 60)) / 1000);
53     document.getElementById("demo").innerHTML = days +"天" +hours +"时" + minutes +"分" +seconds +"秒";
54     }
55   else{//闹钟好了
56     var div=document.getElementById("container");
57     var audio=document.createElement("audio");
58     div.appendChild(audio);
59     audio.src="喜相逢.mp3";
60     audio.loop="loop";
61     audio.autoplay="autoplay";
62     
63   }
64   
65 }
66 //重复调用
67 setInterval(clock,1000)
68 </script>
69 </html>

 

posted @ 2019-01-15 13:02  给自己一个梦  阅读(1509)  评论(0)  编辑  收藏  举报