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>
