1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js实现倒计时</title> 6 <style> 7 div{ 8 position:absolute; 9 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>