javascript 面向对象可复用的倒计时 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 </head>
  7 <style>
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12 
 13     /*banner倒计时*/
 14     .bn-countdown {
 15         position: absolute;
 16         top: 0;
 17         left: 50%;
 18         margin-left: -540px;
 19         font-size: 0;
 20     }
 21 
 22     .bn-countdown p {
 23         float: left;
 24         margin-top: 10px;
 25         height: 50px;
 26         font-size: 16px;
 27         color: #fff;
 28         line-height: 1.2;
 29     }
 30 
 31     .bn-countdownbox {
 32         margin-left: 80px;
 33     }
 34 
 35     .bn-countdownbox span {
 36         display: inline-block;
 37         margin-right: 5px;
 38         width: 50px;
 39         height: 65px;
 40         font-size: 12px;
 41         color: #fff;
 42         text-align: center;
 43         line-height: 1.4;
 44         border-radius: 0 0 5px 5px;
 45         background: #1e1e1e;
 46         overflow: hidden;
 47     }
 48 
 49     .bn-countdownbox span i {
 50         display: block;
 51         font-size: 30px;
 52         font-style: normal;
 53     }
 54 
 55 </style>
 56 <body>
 57 <div class="bn-countdown">
 58     <p>
 59         距离活动<br>结束还剩
 60     </p>
 61     <div class="bn-countdownbox">
 62         <span>
 63             <i id="day"></i>
 64             天
 65         </span>
 66         <span>
 67             <i id="hour"></i>
 68             时
 69         </span>
 70         <span>
 71             <i id="min"></i>
 72             分
 73         </span>
 74         <span>
 75             <i id="sec"></i>
 76             秒
 77         </span>
 78     </div>
 79 </div>
 80 
 81 <div class="bn-countdown" style="margin-left: 0;">
 82     <p>
 83         距离活动<br>结束还剩
 84     </p>
 85     <div class="bn-countdownbox">
 86         <span>
 87             <i id="day1"></i>
 88             天
 89         </span>
 90         <span>
 91             <i id="hour1"></i>
 92             时
 93         </span>
 94         <span>
 95             <i id="min1"></i>
 96             分
 97         </span>
 98         <span>
 99             <i id="sec1"></i>
100             秒
101         </span>
102     </div>
103 </div>
104 <script>
105     function getID(ele) {
106         return document.getElementById(ele);
107     }
108 
109     function GetTime(time, el1, el2, el3, el4) {
110         var day = getID(el1),
111             hour = getID(el2),
112             min = getID(el3),
113             sec = getID(el4);
114 
115         function double(num) {
116             if (num < 10) {
117                 return "0" + num;
118             } else {
119                 return "" + num;
120             }
121         }
122 
123         function goTime() {
124             var t = new Date(time).getTime() - new Date().getTime(),
125                 d = Math.floor(t / 1000 / 60 / 60 / 24),
126                 h = Math.floor(t / 1000 / 60 / 60 % 24),
127                 m = Math.floor(t / 1000 / 60 % 60),
128                 s = Math.floor(t / 1000 % 60);
129             console.log(t)
130 
131             if (t > 0) {
132                 day.innerHTML = double(d);
133                 hour.innerHTML = double(h);
134                 min.innerHTML = double(m);
135                 sec.innerHTML = double(s);
136             }else {
137                 day.innerHTML=hour.innerHTML=min.innerHTML=sec.innerHTML="00";
138             }
139         }
140         goTime();
141         setInterval(goTime, 1000);
142     }
143     var time1 = new GetTime("2016/08/29 23:59:59", "day", "hour", "min", "sec");
144     var time2 = new GetTime("2016/09/01 23:59:59", "day1", "hour1", "min1", "sec1");
145 </script>
146 </body>
147 </html>

感谢 平仔 提供的思路和源码

posted @ 2016-08-29 23:18  Stefan-47  阅读(180)  评论(0)    收藏  举报