秒杀计时器 

 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>

 

posted on 2016-04-07 14:23  DFrain  阅读(730)  评论(0)    收藏  举报

导航