getTime()方法在苹果系统的bug
我们先来看看在安卓系统中的倒计时写法，实例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{
width: 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{
width:25%;
border-radius: 16px;
}
.mh{
width: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{
width: 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{
width:25%;
border-radius: 16px;
}
.mh{
width: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{
width: 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{
width:25%;
border-radius: 16px;
}
.mh{
width: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>