最近要做一个活动，需要用倒计时，写好之后再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的更多相关文章

  1. iOS活动倒计时的两种实现方式

    代码地址如下:http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTime ...

  2. 兼容iOS 10 资料整理笔记

    原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化 ...

  3. iOS开发 - 兼容iOS 10

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

  4. 【转】兼容iOS 10 资料整理

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

  5. 兼容iOS 10 资料整理

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

  6. 兼容iOS 10 资料整理笔记-b

    原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化 ...

  7. 活动倒计时代码（精确到毫秒）jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  9. 关于新版本，iOS10的相关内容，兼容iOS 10 资料整理笔记

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

随机推荐

  1. Nginx的知识分享，继续上次的分享

    5. Nginx配置文件精讲二 #这里为后端服务器wugk应用集群配置,根据后端实际情况修改即可,tdt_wugk为负载均衡名称,可以任意指定 #但必须跟vhosts.conf虚拟主机的pass段一致 ...

  2. 基于 HTML5 Canvas 的 3D 碰撞检测

    这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转.放大缩小这个三个图形,点击"Animate"就能让中间 ...

  3. linux安装redis(转)

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  4. IE之页面加载慢.

    场景 场景是大屏页面一张深色背景, 里面一些文本元素以及图表展示. 结果在IE下发现加载异常缓慢, 还有部分人员反馈页面卡死. 后台读写优化 默认处理图片逻辑是, ImageIO读取原图, 转成byt ...

  5. Python 开发与接口测试学习笔记

    这是我跟着虫师学习中积累下来的学习笔记,写得比较简单,适合想学习Python开发与接口测试的初学者学习. 一.开发投票系统 1.参考官网文档,创建投票系统. https://docs.djangopr ...

  6. NNSZ OIers' Blog Archive

    HWL:ssttkkl ,已经搬家到这个地址 NINGLONG:NINGLONG 愤鸟先飞: FNXF Syhien:13355936 ,已经搬家到这个地址 IDE:ThetaS TFW:TFX‘s ...

  7. 命令行界面下使用emca安装配置Oracle Database Control实战

    作为命令行忠有用户,server端软件的运维都倾向于使用命令或 脚本完毕,非常讨厌资源占用非常大的GUI.Oracle数据库作为重要的server端软件.其安装运维自然也全然支持纯命令行方式.虽然同一 ...

  8. POJ - 1611The Suspects-并查集

    POJ - 1611 The Suspects Time Limit: 1000MS   Memory Limit: 20000KB   64bit IO Format: %I64d & %I ...

  9. 注册Azure AD 2.0 应用程序

    作者:陈希章 发表于 2017年3月22日 上一篇 介绍了Microsoft Graph应用程序的一些概念,以及目前还比较普遍的Azure AD 1.0应用程序的注册方式.但正如我多次提到的那样,虽然 ...

  10. 自学Zabbix3.1-语言切换

    题记:   默认使用的zabbix版本为Zabbix 3.0.8 登陆到zabbix web控制台默认是英文界面,对有些英文不好或者习惯中文的人来说会有不适应. 实际上是切换到中文版本,步骤:点击用户 ...