jQuery實現倒計時
阿新 • • 發佈：2018-02-01
charset ret post display font pos type line cti
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.min.js"></script> 6 <title></title> 7 <style> 8 .clock{width:200px;height:100px;margin:200px auto;} 9 .hour,.min,.sec{width:40px;height:30px;font-size:20px;line-height:30px;display:inline-block;text-align: center;background:#572019;color:#FFFFFF;} 10 span:nth-child(2),span:nth-child(4){font-size:20px;} 11 </style> 12 <script> 13 $(function(){ 14 function getRTime(){ 15 var dateFinal=new Date("2018/07/31 14:00:00"); //截止時間 16 var dateNow=new Date(); //獲得系統當前時間 17var t=dateFinal.getTime()-dateNow.getTime(); //獲取差值，單位毫秒 18 var h=(Math.floor(t/1000/60/60%24)); 19 var m=(Math.floor(t/1000/60%60)); 20 var s=(Math.floor(t/1000%60)); 21 $(".hour").text(toDouble(h)); 22 $(".min").text(toDouble(m)); 23 $(".sec").text(toDouble(s)); 24 } 25 function toDouble(num){ 26 if(num<10){ 27 return"0"+num; 28 }else{ 29 return ""+num; 30 } 31 } 32 setInterval(getRTime,1000); 33 }) 34 </script> 35 <head> 36 <body> 37 <div class="clock"> 38 <span class="hour">00</span> 39 <span>:</span> 40 <span class="min">00</span> 41 <span>:</span> 42
jQuery實現倒計時