最近要做一个活动，需要用倒计时，写好之后再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. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  2. ##5.2 Nova计算节点-- openstack pike

    ##5.2 Nova计算节点 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##5.2 Nova计算节点 # co ...

  3. .net程序员做的第一个安卓APP

    我从毕业之后一直做的是ASP.NET,从毕业到现在都已经五六个年头了.一个事物接触久了就会慢慢没有了新鲜感热情也褪去的差不多了,我又是对新事物比较感兴趣的,虽说Android早就不算什么新事物,当对于 ...

  4. js计时函数实现秒表的开始-暂停-清零功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. TeamTalk安装测试

    TeamTalk介绍 项目框架 TeamTalk是蘑菇街的开源项目,github维护的最后时间是2015但是仍然是一款值得学习的好项目,麻雀虽小五脏俱全,本项目涉及到多个平台.多种语言,简单关系如下图 ...

  6. 项目实战11—企业级nosql数据库应用与实战-redis的主从和集群

    企业级nosql数据库应用与实战-redis 环境背景:随着互联网2.0时代的发展,越来越多的公司更加注重用户体验和互动,这些公司的平台上会出现越来越多方便用户操作和选择的新功能,如优惠券发放.抢红包 ...

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

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

  8. Python的字符编码

    Python的字符编码 1. Python字符编码简介 1. 1  ASCII Python解释器在加载.py文件的代码时,会对内容进行编码,一般默认为ASCII码.ASCII(American St ...

  9. lodash源码分析之compact中的遍历

    小时候, 乡愁是一枚小小的邮票, 我在这头, 母亲在那头. 长大后,乡愁是一张窄窄的船票, 我在这头, 新娘在那头. 后来啊, 乡愁是一方矮矮的坟墓, 我在外头, 母亲在里头. 而现在, 乡愁是一湾浅 ...

  10. Python 练习冊，每天一个小程序

    Python 练习冊,每天一个小程序 说明:     Github 原文地址: 点击打开链接 Python 练习冊.每天一个小程序.注:将 Python 换成其它语言,大多数题目也试用 不会出现诸如「 ...