最近要做一个活动，需要用倒计时，写好之后再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. SSH批量管理 expect自动交互

    SSH批量管理 expect自动交互 原创博文http://www.cnblogs.com/elvi/p/7662908.html # SSH批量管理 # expect自动交互 ########### ...

  2. mysql基础知识点

    /* 启动MySQL */net start mysql /* 连接与断开服务器 */mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */mysqld ...

  3. 网页设计——6.html其他标签

    今天学习html的其他标签: 一.列表 1.无序列表ul 基本结构: <ul  type="属性值"> <li>列表内容</li> </u ...

  4. PPPOE拨号上网流程及密码窃取具体实现

    楼主学生党一枚,最近研究netkeeper有些许心得. 关于netkeeper是调用windows的rasdial来进行上网的东西,网上已经有一大堆,我就不赘述了. 本文主要讲解rasdial的部分核 ...

  5. AspNet Core Api Restful +Swagger 实现微服务之旅 （三）

    (1)  访问Rest ful接口时 Token验证  返回数据格式封装 (一)访问时Token验证  返回数据格式封装 1.1访问Api接口 方法 实现         1.1.1 创建访问Rest ...

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

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

  7. vue项目的骨架及常用组件介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...

  8. JAVA基础再回首（二十五）——Lock锁的使用、死锁问题、多线程生产者和消费者、线程池、匿名内部类使用多线程、定时器、面试题

    JAVA基础再回首(二十五)--Lock锁的使用.死锁问题.多线程生产者和消费者.线程池.匿名内部类使用多线程.定时器.面试题 版权声明:转载必须注明本文转自程序猿杜鹏程的博客:http://blog ...

  9. POJ 2127 最长公共上升子序列

    动态规划法: #include <iostream> #include <cstdio> #include <fstream> #include <algor ...

  10. 谈谈调用腾讯云【OCR-通用印刷体识别】Api踩的坑

    一.写在前面 最近做项目需要用到识别图片中文字的功能,本来用的Tesseract这个写的,不过效果不是很理想. 随后上网搜了一下OCR接口,就准备使用腾讯云.百度的OCR接口试一下效果.不过这个腾讯云 ...