• js时间倒计时


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

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

    TimeDown.js

    /*
    时间倒计时插件
    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

    <!DOCTYPE html>
    <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秒

  • 相关阅读:
    js 获取当前年月日
    Pycharm设置python文件头
    vert.x快速入门
    Java中List<T>和List<?>的区别【转载】
    jdk8 时间
    Pycharm快捷键设置(鼠标滚动控制字体大小)
    IaaS、PaaS和SaaS:云计算的三种服务模式 【转】
    Ruby on rails Mac开发 入门笔记(一)
    用Ruby批量获取电影的评分与影片信息
    猜猜博客园最热门的标签
  • 原文地址:https://www.cnblogs.com/fengxiaozi/p/3437333.html
Copyright © 2020-2023  润新知