最近要做一个活动，需要用倒计时，写好之后再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. Error parsing column 8 (IsRecommended=0 - SByte) Dapper查询mysql数据库可空的tinyint(1)一个错误

    出错条件: 1.实体属性为bool?类型 2.对应字段为可空的tinyint(1)类型 3.该字段查询结果内即含有null,又含有正常值 google答案,两种建议: 1.修改sql语句,直接cast ...

  2. Spring MVC 学习总结（九）——Spring MVC实现RESTful与JSON（Spring MVC为前端提供服务）

    很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交互.RESTful则是一种软件架构风格.设 ...

  3. 十大经典排序算法的JS版

    前言 个人博客:Damonare的个人博客 如遇到问题或有更好的优化方法,可以: 提issue给我 或是pull requests 我都会看到并处理,欢迎Star. 这世界上总存在着那么一些看似相似但 ...

  4. 使用fastdfs-zyc监控FastDFS文件系统

    1.安装jdk运行环境 jdk下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 此处我使用的jdk7U99 ...

  5. Linux 两台服务器之间传输文件和文件夹

    今天处理一个项目要迁移的问题,突然发现这么多图片怎么移过去,可能第一时间想到的是先从这台服务器下载下来,然后再上传到另外一台服务器上面去,这个方法确实是可行,但是实在是太费时间了,今天我就教大家怎么快 ...

  6. nginx利用反向代理调试后台接口

    1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...

  7. DXGI快速截屏录屏技术

    DXGI快速截屏录屏技术 概述   很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...

  8. 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PHP环境的

    在阿里云买ECS的时候选择自己习惯的镜像系统,我一般都是使用Linux Ubuntu,所以,以下的配置都是在Ubuntu 14.04稳定支持版的环境中搭建Linux+Nginx+Mysql+PHP环境 ...

  9. 如何设置html中img宽高相同-css

    最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...

  10. 使用AOP实现缓存注解

    为何重造轮子 半年前写了一个注解驱动的缓存,最近提交到了github.缓存大量的被使用在应用中的多个地方,简单的使用方式就是代码先查询缓存中是否存在数据,如果不存在或者缓存过期再查询数据库,并将查询的 ...