h5 ios 切入后台运行倒计时问题

最新推荐文章于 2023-03-03 15:37:44 发布

在长好看一点就好了

最新推荐文章于 2023-03-03 15:37:44 发布

阅读量2.6k

点赞数 1

分类专栏：移动端优化

本文链接：https://blog.csdn.net/zhangmq0224/article/details/80682721

版权

移动端优化专栏收录该内容

0 篇文章 0 订阅

订阅专栏

实操解决ios切入后台倒计时不在执行

ios的后台为虚拟后台，当把正在运行的程序切入后台时，逻辑不在执行。但是项目中包含着倒计时，切入后台时倒计时也不再执行，这就导致切入后台的程序，再次运行时倒计时的时间对不上!
处理这个问题前，进入了一个误区，就是想着去监听运行的程序被切入到后台，但都以失败告终。

于是想了一下能不能做一个标记，把这个标记作为一个时间的节点去执行，应该拿什么去做标记？？程序切入后台时，逻辑不在执行，再次切回来时倒计时还要是正常的状态,既然跟时间有关，为什么不去拿去本地的时间呢？？

倒计时开始前 var start_time
在执行倒计时再次 var end_time
服务端返回时间戳或自定义时间 var build_time
时间差作为时间标记（行走时间） var diff_time = end_time - start_time

开撸！！

<!DOCTYPE HTML>
<html>
<title>time</title>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery.js"></script>  
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        background: skyblue;
        width: 100%;
        height: 200px;
        margin: auto;
        display: flex;
        color: #fff;
    }
    p{
        margin: auto;
        font-size: 30px;
    }
    span{
        width: 40px;
        height: 40px;
        border-radius: 5px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        background: #fff;
        margin:  0 10px;
        color: #ff3d00;
    }
</style>
</head>    
<body>  
    <div>
        <p><span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    </div>
</body>
 <script type="text/javascript">
    $(function(){
        var build_time  = 527731; //定义倒计时总数
        var start_time = new Date();
        start_time = start_time.getTime();//获取开始时间的毫秒数

        downTime = setInterval(function(){
            //倒计时实时结束时间
            var end_time = new Date();
            end_time = end_time.getTime();

            //拿到时间差作为时间标记（行走时间）
            var diff_time = Math.floor((end_time - start_time));
            //创建时间减去行走时间
            var cut_time= build_time - diff_time;

            if (cut_time> 0) {

                nD = checkTime(Math.floor(cut_time/1000/60/60/24));

                nH = checkTime(Math.floor(cut_time/(1000*60*60))%24);

                nM = checkTime(Math.floor(cut_time/(1000*60))%60);

                nS = checkTime(Math.floor(cut_time/1000)%60);

                msg = "<span>" + nD + "</span>天<span>" + nH + "</span>时<span>" + nM + "</span>分<span>" + nS + "</span>秒"

                $("p").html(msg);

            } else {
                clearInterval(timer);
               //执行你需要的逻辑
               alert("多少人曾羡慕你年轻时的容颜！")
            }
        },1000);

        function checkTime(n){
            return n < 10 ? '0' + n : '' + n
        }
    })
</script>
</html>

其实主要是以拿取本地的时间的时间差作为所行走的时间即使把程序切入后台在次切回的时间差是改变的，所以倒计时再时间上也是改变的。

在长好看一点就好了

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
h5 ios 切入后台运行倒计时问题

实操解决ios切入后台倒计时不在执行ios的后台为虚拟后台，当把正在运行的程序切入后台时，逻辑不在执行。但是项目中包含着倒计时，切入后台时倒计时也不再执行，这就导致切入后台的程序，再次运行时倒计时的时间对不上! 处理这个问题前，进入了一个误区，就是想着去监听运行的程序被切入到后台，但都以失败告终。于是想了一下能不能做一个标记，把这个标记作为一个时间的节点去执行，应该拿什么去做标记？？程序...
复制链接

扫一扫

专栏目录