活动倒计时-兼容ios

时间：2017-11-27 16:39:54 阅读：218 评论：0 收藏：0 [点我收藏+]

标签：scale time body button view else java alt div

最近要做一个活动，需要用倒计时，写好之后再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

标签：scale time body button view else java alt div

原文地址：http://www.cnblogs.com/LChenglong/p/7904283.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行