最近要做一个活动，需要用倒计时，写好之后再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>