海滨擎蟹

微信内 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 个参数版本当然也可以,只是个人觉得太多了)。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »