1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>秒杀</title> 6 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 7 </head> 8 <style> 9 .seckill-timer { 10 display: inline-block; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 margin-top: -20px; 15 margin-left: -46px; 16 overflow: hidden; 17 } 18 .seckill-time { 19 display: inline-block; 20 width: 30px; 21 height: 40px; 22 margin-right: -3px; 23 border-radius: 3px; 24 font-size: 26px; 25 text-align: center; 26 line-height: 40px; 27 color: #fff; 28 background: #3d3d3d; 29 } 30 .seckill-time-separator{ 31 margin-right: -3px; 32 font-size: 16px; 33 font-weight: bold; 34 } 35 .seckill-time:last-of-type{ 36 margin-right: 0; 37 } 38 </style> 39 <body> 40 <div class="seckill-timer"> 41 <span class="seckill-time">0</span> 42 <span class="seckill-time">0</span> 43 <span class="seckill-time-separator">:</span> 44 <span class="seckill-time">0</span> 45 <span class="seckill-time">0</span> 46 <span class="seckill-time-separator">:</span> 47 <span class="seckill-time">0</span> 48 <span class="seckill-time">0</span> 49 </div> 50 <script> 51 $(function(){ 52 //秒杀 53 var secTimeStart = new Date(); 54 secTimeStart.setFullYear(2016,10,07); //调用设置年份 这里需注意，月份比实际月份小1 55 secTimeStart.setHours(10); //设置小时 56 secTimeStart.setMinutes(57); //设置分钟 57 secTimeStart.setSeconds(40); //设置秒 58 secTimeStart.setMilliseconds(999); //设置毫秒 59 var secTimeEnd = secTimeStart.getTime(); 60 function secKill(){ 61 var nowTime = new Date(); 62 var nowMsec = secTimeEnd - nowTime.getTime(); 63 var nowHour = Math.floor(nowMsec/(1000*60*60))%24; 64 var nowMin = Math.floor(nowMsec/(1000*60))%60; 65 var nowSec = Math.floor(nowMsec/(1000))%60; 66 if(nowMsec > 0){ 67 //分别取小时的十位数和个位数 68 $('.seckill-timer').find('span:nth-of-type(1)').text(Math.floor(nowHour/10)%10); 69 $('.seckill-timer').find('span:nth-of-type(2)').text(nowHour%10); 70 71 $('.seckill-timer').find('span:nth-of-type(4)').text(Math.floor(nowMin/10)%10); 72 $('.seckill-timer').find('span:nth-of-type(5)').text(nowMin%10); 73 74 $('.seckill-timer').find('span:nth-of-type(7)').text(Math.floor(nowSec/10)%10); 75 $('.seckill-timer').find('span:nth-of-type(8)').text(nowSec%10); 76 }else{ 77 $('.seckill-timer').html('秒杀已经结束！'); 78 }; 79 return nowMsec; 80 }; 81 window.setInterval(secKill, 1000); 82 }) 83 84 </script> 85 </body> 86 </html>