js时间倒计时效果实现

站长苏飞 · 发表于 2013-11-22 12:39:43

看了网上的其他的例子，觉得写的都有点复杂，不好理解，于是自己动手写了个。

本来想封装成jquery插件，但是觉得因为功能很简单，没有必要做成jquery插件，引用的时候不需要引入jqery库，这里直接用的原生js的方法。

TimeDown.js

[C#] 纯文本查看 复制代码

/*[/size]
时间倒计时插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
    //结束时间
    var endDate = new Date(endDateStr);
    //当前时间
    var nowDate = new Date();
    //相差的总秒数
    var totalSeconds = parseInt((endDate - nowDate) / 1000);
    //天数
    var days = Math.floor(totalSeconds / (60 * 60 * 24));
    //取模（余数）
    var modulo = totalSeconds % (60 * 60 * 24);
    //小时数
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分钟
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;
    //输出到页面
    document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    //延迟一秒执行自己
    setTimeout(function () {
        TimeDown(id, endDateStr);
    }, 1000)
}

Html页面的代码如下

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>[/size]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时间倒计时</title>
    <script src="TimeDown.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="show">
        </div>
        <script type="text/javascript">
            TimeDown("show", "2013-11-25 8:00:45");
        </script>
    </form>
</body>
</html>

显示效果：

还剩:2天19小时29分钟5秒

转自博客园http://www.cnblogs.com/fengxiaozi/p/3437333.html

		自动登录	找回密码
密码			马上注册

[JavaScript] js时间倒计时效果实现