(转)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 };
浙公网安备 33010602011771号