zoukankan html css js c++ java

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)

查看全文

相关阅读:
异或运算
 GitHub使用简介
 归并排序
 快速排序
 字符串匹配
 Runner站立会议06
Runner站立会议05
Runner站立会议04
记计账需求分析
 Runner站立会议03

原文地址：https://www.cnblogs.com/linewman/p/9918588.html

热门文章
Linux grep 命令
 MIT OS lab1
x86架构调用栈分析
 gdb调试tips
选择中位数(第k大的数)
MIT OS lab Makefile 分析
 堆排序
 二分查找
 散列表
 二叉树