原文链接: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();};
(转)js实现倒计时效果(年月日时分秒)
原文地址:http://www.cnblogs.com/steven-snow/p/8042830.html