[源码分享] 炫酷的网站小工具-倒计时

admin

1. <html >
   
2. <head>
   
3. <style type="text/css">
   
4. .se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url() no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
   
5. </style>
   
6. </head>
   
7. <body>
   
8. <div class="se-kl">
   
9. <div class="se-cn">倒计时</div>
   
10. <div class="se-en">COUNT DOWN</div>
    
11. <i class="se-io"></i>
    
12. <div class="se-info">距离结束还剩</div>
    
13. <div class="se-count">
    
14. <div class="se-day"></div>
    
15. <div class="se-hour"><span class="se-txt">00</span></div>
    
16. <div class="se-min"><span class="se-txt">00</span></div>
    
17. <div class="se-sec"><span class="se-txt">00</span></div>
    
18. </div>
    
19. </div>
    
20. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    
21. <script type="text/javascript">
    
22.         $(document).ready(function () {
    
23.             var oDate = new Date();
    
24.             var nowTime = oDate.getTime(); //现在的毫秒数
    
25.             oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
    
26.             var targetDate = new Date(oDate.toLocaleDateString());
    
27.             run(targetDate);
    
28.         });
    
29. 
    
30.         function run(enddate) {
    
31.             getDate(enddate);
    
32.             setInterval("getDate('" + enddate + "')", 500);
    
33.         }
    
34. 
    
35.         function getDate(enddate) {
    
36.             var oDate = new Date(); //获取日期对象
    
37. 
    
38.             var nowTime = oDate.getTime(); //现在的毫秒数
    
39.             var enddate = new Date(enddate);
    
40.             var targetTime = enddate.getTime(); // 截止时间的毫秒数
    
41.             var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数
    
42. 
    
43.             var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
    
44.             second = second % 86400; //余数代表剩下的秒数；
    
45.             var hour = Math.floor(second / 3600); //整数部分代表小时；
    
46.             second %= 3600; //余数代表 剩下的秒数；
    
47.             var minute = Math.floor(second / 60);
    
48.             second %= 60;
    
49.             var spanH = $('.se-txt')[0];
    
50.             var spanM = $('.se-txt')[1];
    
51.             var spanS = $('.se-txt')[2];
    
52. 
    
53.             spanH.innerHTML = tow(hour);
    
54.             spanM.innerHTML = tow(minute);
    
55.             spanS.innerHTML = tow(second);
    
56.         }
    
57. 
    
58.         function tow(n) {
    
59.             return n >= 0 && n < 10 ? '0' + n : '' + n;
    
60.         }
    
61.     </script>
    
62. </body>
    
63. </html>

复制代码