zoukankan      html  css  js  c++  java
  • JS实现倒计时

    //将字符串格式化为时间
    function parseDate(str) {
        var bb = document.getElementById("bb");
        if (typeof str == 'string') {
            var results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) *$/);
            if (results && results.length > 3)
                return new Date(parseInt(results[1], 10), parseInt(results[2], 10) - 1, parseInt(results[3], 10));
            results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) +(\d{1,2}):(\d{1,2}):(\d{1,2}) *$/);
            if (results && results.length > 6)
                return new Date(parseInt(results[1], 10), (parseInt(results[2], 10) - 1), parseInt(results[3], 10), parseInt(results[4], 10), parseInt(results[5], 10), parseInt(results[6], 10));
            results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) +(\d{1,2}):(\d{1,2}):(\d{1,2})\.(\d{1,9}) *$/);
            if (results && results.length > 7)
                return new Date(parseInt(results[1], 10), parseInt(results[2], 10) - 1, parseInt(results[3], 10), parseInt(results[4], 10), parseInt(results[5], 10), parseInt(results[6], 10), parseInt(results[7], 10));
        }
        return null;
    }

    //倒计时 deadline:截止日期,要求格式为:yyyy-MM-dd 或者 yyyy-MM-dd HH:mm:ss或者 yyyy-MM-dd HH:mm:ss.ms
    //       divname:倒计时要显示的位置
    //       type:1:显示精确到分;0:显示精确到秒
    //       msg1、msg2:当倒计时分别不为0、为0时显示的提示信息
    function ShowCountDown(deadline, divname, type, msg1, msg2) {
        var cc = document.getElementById(divname);
        var now = new Date();
        var endDate = parseDate(deadline);
        if (endDate != null) {
            var leftTime = endDate.getTime() - now.getTime();
            if (leftTime > 0) {
                var leftsecond = parseInt(leftTime / 1000);
                var day = Math.floor(leftsecond / (60 * 60 * 24));
                var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
                var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
                var second = Math.floor(leftsecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);
               
                if (cc != null) {
                   if (type == 1) {cc.innerHTML = msg1 + day + "天" + hour + "小时" + minute + "分";}
                   else { cc.innerHTML = msg1 + day + "天" + hour + "小时" + minute + "分" + second + "秒"; }
                }           
            }
            else {
                cc.innerHTML = msg2;
            } 
        }
    }



    使用例子:

    var interval = 1000;
     window.setInterval(function() { ShowCountDown('2010-6-11 15:36:00', 'div1', 1,'距停止报名还有 ', '活动已结束'); }, interval);

  • 相关阅读:
    如何成为一个合格的数据架构师?
    证道:零售企业如何借助数据智能提升人效?| 数智加速度10课回顾
    终于,数据中台成为3000万企业的增长引擎
    凯德中国 × 阿里云 × 奇点云 | 沉淀数据资产,遇见数智未来
    追风:数据中台如何驱动全域消费者运营?| 数智加速度09课回顾
    何夕:跟上趋势,拥抱全域数据中台 | 数智加速度08课回顾
    南弈:释放数据价值的「三个关键点」 | 数智加速度07课回顾
    百然:智能算法如何落地商业化?| 数智加速度06课回顾
    星魁:管理数据资产的「五步骤」与「六要素」 | 数智加速度05课回顾
    pytest系列(四)- pytest+allure+jenkins
  • 原文地址:https://www.cnblogs.com/gdjlc/p/2086908.html
Copyright © 2011-2022 走看看