(转)js实现倒计时效果(年月日时分秒)

原文链接:http://mengqing.org/archives/js-countdown.html

之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用。
(用的是张鑫旭写的一个倒计时,稍作修改了下,原文:http://www.zhangxinxu.com/wordpress/?p=987)

用法:

<div class="timer">
    <span id="years">00</span>:
    <span id="months">00</span>:
    <span id="days">00</span>:
    <span id="hours">00</span>:
    <span id="minutes">00</span>:
    <span id="seconds">00</span>
</div>
 
<script type="text/javascript">
    // 获取本机当前时间
    var mydate = new Date();
//  console.log(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds());
     
    var futureDate = eval(Date.UTC(2014, 10, 30, 12, 0, 0));
//  var nowDate = eval(Date.UTC(2013, 11, 15, 16, 36, 52));
    var nowDate = eval(Date.UTC(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds()));
    var obj = {
        sec: document.getElementById("seconds"),
        mini: document.getElementById("minutes"),
        hour: document.getElementById("hours"),
        day: document.getElementById("days"),
        day: document.getElementById("months"),
        day: document.getElementById("years")
    }
    fnTimeCountDown(futureDate, obj, nowDate, function () {
//      console.log('时间到了!');
    });
</script>

  JS源码:

 1 /* 
 2 * 倒计时的实现
 3 */
 4 var fnTimeCountDown = function (d, o, now, callback) {
 5     var f = {
 6         zero: function (n) {
 7             var n = parseInt(n, 10);
 8             if (n > 0) {
 9                 if (n <= 9) {
10                     n = "0" + n;
11                 }
12                 return String(n);
13             } else {
14                 return "00";
15             }
16         },
17         dv: function () {
18             d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
19             var future = new Date(d);
20             var nowTime = new Date(now);
21             //现在将来秒差值
22             var dur = Math.round((future.getTime() - nowTime.getTime()) / 1000), pms = {
23                 sec: "00",
24                 mini: "00",
25                 hour: "00",
26                 day: "00",
27                 month: "00",
28                 year: "0"
29             };
30             if (dur > 0) {
31                 pms.sec = f.zero(dur % 60);
32                 pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";
33                 pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";
34                 //pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400)) % 30) : "00";
35                 pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor(dur / 86400)) : "00";
36                 //月份,以实际平均每月秒数计算
37                 pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
38                 //年份,按回归年365天5时48分46秒算
39                 pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "0";
40             }
41             return pms;
42         },
43         ui: function () {
44             if (o.sec) {
45                 o.sec.innerHTML = f.dv().sec;
46             }
47             if (o.mini) {
48                 o.mini.innerHTML = f.dv().mini;
49             }
50             if (o.hour) {
51                 o.hour.innerHTML = f.dv().hour;
52             }
53             if (o.day) {
54                 o.day.innerHTML = f.dv().day;
55             }
56             if (o.month) {
57                 o.month.innerHTML = f.dv().month;
58             }
59             if (o.year) {
60                 o.year.innerHTML = f.dv().year;
61             }
62             now = now + 1000;
63             if (f.dv().sec == "00" && f.dv().mini == "00" && f.dv().hour == "00" && f.dv().day == "00" && f.dv().month == "00" && f.dv().year == "0") {
64                 if (callback) {
65                     callback();
66                 }
67             }
68  
69             setTimeout(f.ui, 1000);
70         }
71     };
72     f.ui();
73 };

 

posted @ 2015-11-30 13:28  追梦客  阅读(690)  评论(0)    收藏  举报