网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:48 作者: 阅读:

[导读] 倒计时我们只要利用js settimeout与div结合就可以实现每秒都在显示的时间了,下面整理了一个工作中用到的实例分享给各位同学。...

之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用

使用方法如下

 代码如下 复制代码

<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();
};

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论