活动倒计时-兼容ios

Posted AiTing on the way

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了活动倒计时-兼容ios相关的知识，希望对你有一定的参考价值。

最近要做一个活动，需要用倒计时，写好之后再ios上无效，经过百度知道了，原来IOS不能识别格式“2017-11-09 ……”,所以要进行转换才有效

 

直接上代码了：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <textarea name="" id="txt1" cols="30" rows="10"></textarea>
    <textarea name="" id="txt2" cols="30" rows="10"></textarea>


    <button id="time_btn">测试倒计时</button>
    <div id="timelayer" class="timelayer">
        <div class="con">
            <h4>离活动开始还有</h4>
            <p>
                <span id="t_d"></span> 天
                <span id="t_h"></span> 小时
                <span id="t_m"></span> 分钟
                <span id="t_s"></span> 秒
            </p>
            <button id="close" class="close">关闭</button>
        </div>
    </div>
    <script type="text/javascript">
        var txt1 = document.getElementById(\'txt1\');
        var txt2 = document.getElementById(\'txt2\');
    


        // 设置活动时间的格式为  2017-11-27 00:00:00
        var theTime = "2019-11-28 00:00:00";
        var timeLayer = document.getElementById("timelayer");
        var timeLayerClose = document.getElementById("close");
        var timeBtn = document.getElementById(\'time_btn\');

        timeBtn.onclick = function () {
            //注意：必须将字符-转换为/，否则IOS不能识别
            var setDate = new Date(Date.parse(theTime.replace(/-/g, "/"))).getTime();    //Date.parse(new Date());  //字符串转换为时间戳  
            var nowDate = new Date().getTime();
            
            console.log(setDate);
            console.log(nowDate);
            if (setDate <= nowDate) {
                //活动开始
                console.log(\'start\')
            } else {
                //活动未开始，倒计时
                setInterval(GetRTime, 0);
                timeLayer.classList.add(\'show\')
            }

        }


        //弹框JS
        timeLayerClose.onclick = function () {
            timeLayer.classList.remove(\'show\')
        }

        // 倒计时JS
        function GetRTime() {
            var EndTime = new Date(Date.parse(theTime.replace(/-/g, "/"))).getTime();
            var NowTime = new Date().getTime();

            txt1.innerText = EndTime;
            txt2.innerText = NowTime;
            var t = EndTime - NowTime;
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            if (t >= 0) {
                d = Math.floor(t / 1000 / 60 / 60 / 24);
                h = Math.floor(t / 1000 / 60 / 60 % 24);
                m = Math.floor(t / 1000 / 60 % 60);
                s = Math.floor(t / 1000 % 60);
            }

            document.getElementById("t_d").innerHTML = d;
            document.getElementById("t_h").innerHTML = h;
            document.getElementById("t_m").innerHTML = m;
            document.getElementById("t_s").innerHTML = s;
        }








    </script>



    <style>
        .timelayer {
            display: none;
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, .6);
        }

        .timelayer.show {
            display: block !important;
        }

        .timelayer .con {
            background-color: #fff;
            width: 260px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -73px;
            padding: 35px 20px;
            border-radius: 8px;
            overflow: hidden;
            margin-left: -150px;
        }

        .timelayer h4 {
            line-height: 45px;
            font-size: 20px;
            font-weight: 700;
            color: #7e28c2;
            text-align: center;
            margin:0px;
        }

        .timelayer p {
            margin-top: 10px;
            text-align: center;
            font-size: 16px;
        }

        .timelayer p span {
            padding: 0px 3px;
            color: red;
            font-weight: 700;
        }

        .timelayer .close {
            position: absolute;
            height: 35px;
            width: 35px;
            right: 0px;
            top: 0px;
            /*background: url(images/close3.png) center center no-repeat;*/
            background-size: 20px;
        }
    </style>
</body>

</html>

 

以上是关于活动倒计时-兼容ios的主要内容，如果未能解决你的问题，请参考以下文章

如何在使用片段和计时器的选项卡式活动上更新 UI

活动/片段转换是不是与棒棒糖之前的设备兼容？

如何在多片段活动中处理 onContextItemSelected？

python使用上下文对代码片段进行计时，非装饰器

在android中使用底部导航的最佳实践：活动与片段

片段和活动之间的核心区别是啥？哪些代码可以写成片段？