最近要做一个活动，需要用倒计时，写好之后再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. 对jQuery源码的一点感悟

    1.  链式写法 这是jQuery语法上的最大特色,也许该改改POJO里的set方法,和其他的非get方法什么的,可以把多行代码合并,减去每次敲打对象变量的麻烦 2.  动态参数 偶尔使用Java的动 ...

  2. MySQL查看和修改表的存储引擎（转载+加点东西）

    1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎 两种方法: a.show table status from YOUR_DB_NAME where name='YOU ...

  3. Vux配置指南

    流程 Vux是Vue.js的一个ui库,官网在这里,官方文档的配置指南侧重于技术的罗列,我这里简化一下Vux的配置流程. 1. 安装vux npm install vux --save 2. 安装le ...

  4. 基于python2.7通过boto3实现ec2表格化

    #!/usr/bin/env python import xlwt,xlrd,datetime,json,os,xlutils.copy a={ 'VpcPeeringConnection': { ' ...

  5. Django使用遇到的各种问题及解决方法

    从Django的 搭建开始,遇到的问题就不断,网站还没有发布,就出错了,我查了好多资料,啃得了不少东西,也没有找到合适的方法,终于没办法了,自己硬着头皮往下读,终于解决了这些问题,下面分享给大家. 代 ...

  6. Spark之搜狗日志查询实战

    1.下载搜狗日志文件: 地址:http://www.sogou.com/labs/resource/chkreg.php 2.利用WinSCP等工具将文件上传至集群. 3.创建文件夹,存放数据: mk ...

  7. 单点登录cas常见问题(十四) - ST和TGT的过期策略是什么？

    ST和TGT的过期策略能够參看配置文件:ticketExpirationPolicies.xml 1.先说ST:ST的过期包含使用次数和时间,默认使用一次就过期,或者即使没有使用.一段时间后也要过期 ...

  8. HDU 4162 Shape Number（字符串，最小表示法）

    HDU 4162 题意: 给一个数字串(length <= 300,000),数字由0~7构成,求出一阶差分码,然后输出与该差分码循环同构的最小字典序差分码. 思路: 第一步是将差分码求出:s[ ...

  9. UML总结复习指南

    用例图 1. 參与者(Actor) 表示与您的应用程序或系统进行交互的用户.组织或外部系统.用一个小人表示.   2. 用例(Use Case)   用例就是外部可见的系统功能,对系统提供的服务进行描 ...

  10. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...