微信内 js 倒计时时间显示为 00:00:00 问题解析 —— js Date() 函数用法
前段时间在网上找了一个 js 版本的倒计时函数:JS 实现倒计时时间(天数、时、分、秒)。PC 端模拟器和微信开发者工具测试没有问题,订单列表页和详情页可以正常显示倒计时时间。但放到移动端(一开始以为是只是微信,后来所有浏览器测试都是这样)倒计时就一直停留在 00:00:00
。
实际使用的 demo:
<div>
<span id="d_h">00</span>时
<span id="d_m">00</span>分
<span id="d_s">00</span>秒
</div>
<script type="text/javascript">
$(document).ready(function () {
countTime("2021/12/31 00:00:00");
});
function countTime(order_time) {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
// var str = order_time;
var endDate = new Date(order_time);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime >= 0) {
// d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
} else {
// d = 0;
h = '00';
m = '00';
s = '00';
}
//将倒计时赋值到 div 中
// document.getElementById("d_d").innerHTML = d;
$("#d_h").text(h);
$("#d_m").text(m);
$("#d_s").text(s);
//递归每秒调用 countTime 方法,显示动态时间效果
setTimeout(function () {countTime(order_time);}, 1000);
}
</script>
在测试了 $(document).ready();
修改成 $()
,将 countTime()
函数定义放在使用前面,"use strict"
严格模式开启、关闭都徒劳无功之后,终于发现了问题所在:js Date() 函数字符串参数格式错误。Date() 函数参数类型有以下 5 种:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);
以下是参数说明:
month:用英文表示月份名称,从 January 到 December
mth:用整数表示月份,从 0-11 (1 月到 12 月)
dd:表示一个月中的第几天,从 1 到 31
yyyy:四位数表示的年份
hh:小时数,从 0 (午夜)到 23 (晚 11 点)
mm:分钟数,从 0 到 59 的整数
ss:秒数,从 0 到 59 的整数
ms:毫秒数,为大于等于 0 的整数
之前使用的 "2021/12/31 00:00:00"
或者 "2021-12-31 00:00:00"
都不是标准的 js Date() 字符串参数形式。不清楚为什么这种不标准参数在 PC 浏览器可以被识别和使用,但移动端显然需要严格遵守规定参数的格式。因为 month 需要用英文表示,所以 php 后台输出的时候需要固定格式 date("F d,Y H:i:s")
,或者使用毫秒参数(6 个参数版本当然也可以,只是个人觉得太多了)。