1. 程式人生 > >jQuery實現倒計時

jQuery實現倒計時

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(); //獲得系統當前時間 17
var 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實現倒計時