(转)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();
};
时间: 2024-11-05 21:55:17

(转)js实现倒计时效果(年月日时分秒)的相关文章

年月日时分秒加星期的即时显示的JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

手机端日期时间控件(mobiscroll)设置年月日时分秒及时间格式

mobiscroll是个很好用的jquery日期插件,它可以实现在移动端滚动选择日期. 网上有很多相关的介绍:别人写过的我在这里不再重复,只记录自己的一些经验 首选,我用的是mobiscroll-2.13.2.full.min.js:至于其他版本没测试过,不敢保证使用效果完全相同. 进入主题,项目需要时间选择器提供年月日时分秒的格式. 网上搜索了一圈,只发现年月日时分的设置方法. 最后在官网找到解决办法 直接上代码 timeWheels: 'HHiiss',//HH:24小时制:hh:12小时制

jquery 的日期时间控件(年月日时分秒)

<!-- import package --> <script type="text/javascript" src="JS/jquery.js"></script> <script type="text/javascript" src="JS/jquery-ui-1.7.3/ui/jquery-ui-1.7.3.custom.js"></script> <sc

My97DatePicker设置日期年月日时分秒格式

My97DatePicker设置日期年月日时分秒格式技术 maybe yes 发表于2015-01-07 18:49 原文链接 : http://blog.lmlphp.com/archives/57  来自 : LMLPHP后院 前端 JavaScript 日期插件 My97DatePicker 非常出名.N多年以前我就使用过,当时下载了之后,使用的时候默认是没有小时,分钟,秒之类的,直接是年月日的日期格式,跟一般的日期插件没有什么不同.后来找了文档才知道可以设置日期格式.最大日期限制和最小日

C# 版本的 计时器类:精确到微秒 秒后保留一位小数 支持年月日时分秒带单位的输出

class TimeCount { // 临时变量,存放当前类能表示的最大年份值 private static ulong MaxYear = 0; /// <summary> /// 获取毫秒能表示的最大年份数 /// </summary> /// <returns>年份数最大值</returns> public static ulong GetMaxYearCount() { if (TimeCount.MaxYear != 0) return Time

sql server获取当前年月日 时分秒

获取当前年月日(字符串): select CONVERT(varchar(11),GETDATE(),112) 获取当前时间的时分秒(':'隔开): select CONVERT(varchar(12),GETDATE(),108) 将年月日时分秒拼接成一条字符串: select CONVERT(varchar(11),GETDATE(),112)+REPLACE(CONVERT(varchar(12),GETDATE(),108),':','')

计算一个人的年龄(年月日时分秒),有不对的地方希望大家指出!

想想我们可以做一个计时器,记录一下我们走过了多少时光.看了一下网上别人的一些代码,记录年月的都并不科学,甚至很麻烦,自己倒腾了一上午,总算弄出来了一个. 自己觉得还比较科学,暂时没有发现BUG,如果哪里有错,希望大家指出来! 上代码: <!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

关于时间的操作(Java版)——将毫秒转换为年月日时分秒

第一种方式: import java.util.Calendar; import java.util.TimeZone; public class Test { /** * 将毫秒转换为年月日时分秒 * * @author GaoHuanjie */ public String getYearMonthDayHourMinuteSecond(long timeMillis) { Calendar calendar = Calendar.getInstance(TimeZone.getTimeZo

php实现显示网站运行时间-秒转换年月日时分秒

<?php // 设置时区 date_default_timezone_set('Asia/Shanghai'); /** * 秒转时间,格式 年 月 日 时 分 秒 * * @author [email protected] * @param int $time * @return array|boolean */ function Sec2Time($time){ if(is_numeric($time)){ $value = array( "years" => 0,