JQuery + H5页面多个倒计时处理方式

JQuery + H5,一个页面多个倒计时处理方式

最近做项目,碰到一个H5页面中存在多个倒计时的一些小问题。

项目中的h5页面是只运行安卓机自带浏览器中(微信浏览器,苹果手机浏览器这些均不考虑)。h5页面运行的时候,倒计时是会执行的,如果将浏览器切换至后台运行(比如本来打开了浏览器,临时切换到其他APP应用)的操作。在没有切换回浏览器之前倒计时是不会动(js置于后台不运行),就会导致中间有一个时间差。

我们需要解决切换后-切换回来中间的那段时差,比较方便的办法 ,使用visibilitychange页面可见性改变事件,重新执行倒计时初始化代码。
document.addEventListener("visibilitychange", function() {
   if(!document.hidden){
   		//当页面再次可见时,初始化倒计时代码,例:
      init();
   }
});
上效果
需要注意的是,一个页面中如果存在多个倒计时的话,定时器需要用一个数组来存储,直接贴倒计时代码。

多个倒计时代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=375, user-scalable=no, target-densitydpi=device-dpi ">
    <title>倒计时</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        ul{
            display: flex;
        }
        ul li{
            list-style:none;
            text-align:center;
            padding: 0px 3px;
        }
        .num{
            width:180px;
            margin: 50px auto;
        }
        .number-title{
            text-align:center;
            font-size:15px;
            color: #333333;
            font-weight: bold;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="number-content">
        <div class="number-title">多个倒计时</div>
        <div class="num" id="001" data-time='2020/05/27 00:00:00'>
            <ul>
                <li class="day">2</li>
                <li></li>
                <li class="hour">12</li>
                <li></li>
                <li class="minute">34</li>
                <li></li>
                <li class="second">58</li>
                <li></li>
            </ul>
        </div>
        <div class="num" id="002" data-time='2020/06/21 04:23:55'>
            <ul>
                <li class="day">3</li>
                <li></li>
                <li class="hour">12</li>
                <li></li>
                <li class="minute">34</li>
                <li></li>
                <li class="second">58</li>
                <li></li>
            </ul>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
    var timerArr = []; //定时器
    var currentDate = '';
    var time = 0;
    // 浏览器页面显示时初始化倒计时
    document.addEventListener("visibilitychange", function() {
       if(!document.hidden){
          initNumber();
       }
    });
    $(function(){
          // 初始化倒计时
          initNumber();
        }
    )
    function initNumber(){
        var num = $('.number-content').find('.num');
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        //获取当前系统时间
        currentDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        var curtime = new Date(currentDate).getTime();
        num.each(function() {
              var _this = $(this);
              var dataTime = $(this).attr('data-time');
              var endTime = new Date(dataTime).getTime();
              time = (endTime - curtime) / 1000;
              setTimer(_this,time)
        });
    }
    function setTimer(_this,time){
      var timer = $(_this).attr('id');
      clearTimeout(timerArr[timer]);
      if(time > 0){
            timerArr[timer] = setTimeout(function() {
              setTimer(_this,time - 1);
            }, 1000)

            // 获取天、时、分、秒
            let day = parseInt(time / (60 * 60 * 24));
            let hour = parseInt(time % (60 * 60 * 24) / 3600);
            let minute = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let second = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            if($(_this).find('.day').html() != day){
                $(_this).find('.day').html(day);
            }
            if($(_this).find('.hour').html() != hour){
                $(_this).find('.hour').html(hour);
            }
            if($(_this).find('.minute').html() != minute){
                $(_this).find('.minute').html(minute);
            }
            $(_this).find('.second').html(second);
      } else {
            $(_this).find('.day').html('0');
            $(_this).find('.hour').html('0');
            $(_this).find('.minute').html('0');
            $(_this).find('.second').html('0');
            clearTimeout(timerArr[timer]);
        }
    }
    </script>
</body>
</html>

你可能感兴趣的:(H5,JQuery,jquery,html5)