• getTime()方法在苹果系统的bug


    前几天我在测试苹果系统的一个秒杀页面时发现,“yyyy-MM-dd HH:mm:ss”这种格式的时间在苹果系统中直接用getTime()方法会返回NaN。

    我们先来看看在安卓系统中的倒计时写法,实例1:时间格式:2016-12-30 23:59:59

    <html lang="zh-CN">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>倒计时</title>
    	<style type="text/css">
    		body{margin: 0;background: #eee;}
    		.p{
    			 98%;
    			text-align: center;
    			height:32px;
    			line-height:32px;
    			margin: 10px 1%;
    			font-size: 0;
    		}
    		.span,.mh{
    			display:inline-block;
    			height:32px;
    			line-height:32px;
    			font-size:16px;
    			background:#000;
    			color:#fff;
    			text-align: center;
    		}
    		.span{
    			25%;
    			border-radius: 16px;
    		}
    		.mh{
    			10%;
    			background: #fff;
    			border-radius: 16px;
    			color: #000;
    		}
    	</style>
    </head>
    <body>
    <p class="p">
    	<span class="span" id="hour">00</span><span class="mh">:</span>
    	<span class="span" id="minute">00</span><span class="mh">:</span>
    	<span class="span" id="second">00</span>
    </p>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    	var countdown=function(a){
    		function countDown(){
    			intDiff = intDiff - 1000;
                if(intDiff<=0){
    				$(a.hour).html("00");
    				$(a.minute).html("00");
    				$(a.section).html("00");
    			}else{
    				var day = Math.floor(intDiff / (1000 * 60 * 60 * 24));
    				var hour2 = Math.floor(intDiff / (1000 * 60 * 60));
    				var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24);
    				var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
    				var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    				if(hour2<=9){hour2="0"+hour2;};
    				if(minute<=9){minute="0"+minute;};
    				if(second<=9){second="0"+second;};
    				$(a.hour).html(hour2);
    				$(a.minute).html(minute);
    				$(a.section).html(second);
    			}
    			setTimeout(countDown,1000);
    		}
    		countDown();
    	}
    	var endTime = new Date('2016-12-30 23:59:59').getTime();
    	var startTime = new Date().getTime();
    	var intDiff = endTime - startTime;
    	countdown({hour:"#hour",minute:"#minute",section:"#second"});
    </script>
    </body>
    </html>
    


    上述时间处理方法,快捷简单,但是在苹果系统中会返回NaN,那么我们应该怎么处理呢?
    第一种方法:时间格式的处理,时间格式:Fri Dec 30 2016 23:59:59 GMT+0800

    <html lang="zh-CN">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>倒计时</title>
    	<style type="text/css">
    		body{margin: 0;background: #eee;}
    		.p{
    			 98%;
    			text-align: center;
    			height:32px;
    			line-height:32px;
    			margin: 10px 1%;
    			font-size: 0;
    		}
    		.span,.mh{
    			display:inline-block;
    			height:32px;
    			line-height:32px;
    			font-size:16px;
    			background:#000;
    			color:#fff;
    			text-align: center;
    		}
    		.span{
    			25%;
    			border-radius: 16px;
    		}
    		.mh{
    			10%;
    			background: #fff;
    			border-radius: 16px;
    			color: #000;
    		}
    	</style>
    </head>
    <body>
    <p class="p">
    	<span class="span" id="hour">00</span><span class="mh">:</span>
    	<span class="span" id="minute">00</span><span class="mh">:</span>
    	<span class="span" id="second">00</span>
    </p>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    	var countdown=function(a){
    		function countDown(){
    			intDiff = intDiff - 1000;
                if(intDiff<=0){
    				$(a.hour).html("00");
    				$(a.minute).html("00");
    				$(a.section).html("00");
    			}else{
    				var day = Math.floor(intDiff / (1000 * 60 * 60 * 24));
    				var hour2 = Math.floor(intDiff / (1000 * 60 * 60));
    				var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24);
    				var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
    				var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    				if(hour2<=9){hour2="0"+hour2;};
    				if(minute<=9){minute="0"+minute;};
    				if(second<=9){second="0"+second;};
    				$(a.hour).html(hour2);
    				$(a.minute).html(minute);
    				$(a.section).html(second);
    			}
    			setTimeout(countDown,1000);
    		}
    		countDown();
    	}
    	var endTime = new Date('Fri Dec 30 2016 23:59:59 GMT+0800').getTime();
    	var startTime = new Date().getTime();
    	var intDiff = endTime - startTime;
    	countdown({hour:"#hour",minute:"#minute",section:"#second"});
    </script>
    </body>
    </html>
    


    第二种方法:将时间自己处理,1、时间格式:2016-12-30 23:59:59;2、处理方法:disposeTime()

    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>倒计时</title>
    <style type="text/css">
    body{margin: 0;background: #eee;}
    .p{
    98%;
    text-align: center;
    height:32px;
    line-height:32px;
    margin: 10px 1%;
    font-size: 0;
    }
    .span,.mh{
    display:inline-block;
    height:32px;
    line-height:32px;
    font-size:16px;
    background:#000;
    color:#fff;
    text-align: center;
    }
    .span{
    25%;
    border-radius: 16px;
    }
    .mh{
    10%;
    background: #fff;
    border-radius: 16px;
    color: #000;
    }
    </style>
    </head>
    <body>
    <p class="p">
    <span class="span" id="hour">00</span><span class="mh">:</span>
    <span class="span" id="minute">00</span><span class="mh">:</span>
    <span class="span" id="second">00</span>
    </p>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    var countdown=function(a){
    function countDown(){
    intDiff = intDiff - 1000;
                if(intDiff<=0){
    $(a.hour).html("00");
    $(a.minute).html("00");
    $(a.section).html("00");
    }else{
    var day = Math.floor(intDiff / (1000 * 60 * 60 * 24));
    var hour2 = Math.floor(intDiff / (1000 * 60 * 60));
    var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24);
    var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
    var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    if(hour2<=9){hour2="0"+hour2;};
    if(minute<=9){minute="0"+minute;};
    if(second<=9){second="0"+second;};
    $(a.hour).html(hour2);
    $(a.minute).html(minute);
    $(a.section).html(second);
    }
    setTimeout(countDown,1000);
    }
    countDown();
    }
            var disposeTime = function(a){
                  a = a || new Date().getTime() + 24*60*60*1000;
                  timeArr0 = a.split(' ');
                  timeArr1 = timeArr0[1].split(':');
                  return new Date(timeArr0[0]).getTime() + timeArr1[0]*3600000 + timeArr1[1]*60000 + timeArr1[2]*1000 - 8*3600*1000;
            }
    var endTime = disposeTime('2016-12-30 23:59:59');
    var startTime = new Date().getTime();
    var intDiff = endTime - startTime;
    countdown({hour:"#hour",minute:"#minute",section:"#second"});
    </script>
    </body>
    </html>

    其他

    [我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

    [我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

    [微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

    [前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

    [微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

    [微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

    [微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

    [微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

    [前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

    [游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

  • 相关阅读:
    接收短信
    linux 中统计相同序列出现的次数
    linux 中 vmware如何扩展磁盘大小
    pindel软件的基本用法
    如何解决vim 编辑器注释行后面字符开不清
    linux中basename命令
    linux 中 利用命令向文件的末尾添加空行
    普通用户调整vim编辑器配置
    利用samtools软件将sam文件转换为bam文件
    linux 中 date +%s 获取1970年以来的秒数
  • 原文地址:https://www.cnblogs.com/linewman/p/9918588.html
Copyright © 2020-2023  润新知