• (转)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源码:

    /* 
    * 倒计时的实现
    */
    var fnTimeCountDown = function (d, o, now, callback) {
        var f = {
            zero: function (n) {
                var n = parseInt(n, 10);
                if (n > 0) {
                    if (n <= 9) {
                        n = "0" + n;
                    }
                    return String(n);
                } else {
                    return "00";
                }
            },
            dv: function () {
                d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
                var future = new Date(d);
                var nowTime = new Date(now);
                //现在将来秒差值
                var dur = Math.round((future.getTime() - nowTime.getTime()) / 1000), pms = {
                    sec: "00",
                    mini: "00",
                    hour: "00",
                    day: "00",
                    month: "00",
                    year: "0"
                };
                if (dur > 0) {
                    pms.sec = f.zero(dur % 60);
                    pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";
                    pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";
                    //pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400)) % 30) : "00";
                    pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor(dur / 86400)) : "00";
                    //月份,以实际平均每月秒数计算
                    pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
                    //年份,按回归年365天5时48分46秒算
                    pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "0";
                }
                return pms;
            },
            ui: function () {
                if (o.sec) {
                    o.sec.innerHTML = f.dv().sec;
                }
                if (o.mini) {
                    o.mini.innerHTML = f.dv().mini;
                }
                if (o.hour) {
                    o.hour.innerHTML = f.dv().hour;
                }
                if (o.day) {
                    o.day.innerHTML = f.dv().day;
                }
                if (o.month) {
                    o.month.innerHTML = f.dv().month;
                }
                if (o.year) {
                    o.year.innerHTML = f.dv().year;
                }
                now = now + 1000;
                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") {
                    if (callback) {
                        callback();
                    }
                }
     
                setTimeout(f.ui, 1000);
            }
        };
        f.ui();
    };
  • 相关阅读:
    [BZOJ1492] [NOI2007]货币兑换Cash 斜率优化+cdq/平衡树维护凸包
    [BZOJ2638] 黑白染色
    [BZOJ2006] [NOI2010]超级钢琴 主席树+贪心+优先队列
    [BZOJ3698] XWW的难题 网络流
    [BZOJ2151] 种树 贪心
    js中的闭包理解一
    HTML5 input placeholder 颜色修改示例
    26 个 jQuery使用技巧
    JS原型与原型链(好文看三遍)
    文字和图片垂直居中
  • 原文地址:https://www.cnblogs.com/steven-snow/p/8042830.html
Copyright © 2020-2023  润新知