js实现支付倒计时(复制即可使用)

效果

html部分

 <div id="remainTime" style="color: red;background-color: yellow"></div>

js部分

如果要测试,只需要给end_time赋值即可

//定时器 1秒执行一次
    var interval=setInterval(countDown,1000);
    //倒计时函数
    function countDown (){
        //$time=后端订单创建时间+过期时间 2020-12-18 11:20:00  此处我已经加了5分钟的过期时间
        var end_Time="<?php echo $time?>";
        var start = new Date();//当前时间
        var end = new Date(end_Time);//结束时间
        var down = (end.getTime() - start.getTime())/1000;//计算差值 按秒算
        //获取分钟数
        var minutes = parseInt(down/60%60);
        //获取秒数
        var seconds = parseInt(down%60);
        //下面就是插入到页面事先准备容器即可;
        document.getElementById('remainTime').innerHTML ="支付剩余时间:" + minutes + "分" + seconds + "秒";

        //别忘记当时间为0的,要让其知道结束了;
        if(down < 0){
            //过期后 看个人逻辑 一般都是让二维码显示已过期,我是直接文字显示
            document.getElementById('remainTime').innerHTML = '二维码无效了,请刷新重新获取';
            window.clearInterval(interval);//关闭定时器
        }
    }

 

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,这个问题我可以回答。以下是使用 JavaScript 实现倒计时功能的示例代码: ```html <!DOCTYPE html> <html> <head> <title>倒计时示例</title> </head> <body> <h1 id="countdown"></h1> <script> // 目标日期 var targetDate = new Date("2022-01-01T00:00:00Z"); // 更新倒计时的函数 function updateCountdown() { // 计算目标日期和当前日期之间的时间差 var timeDiff = targetDate.getTime() - Date.now(); // 如果时间差小于等于零,说明倒计时已经结束 if (timeDiff <= 0) { document.getElementById("countdown").innerHTML = "倒计时结束!"; return; } // 将时间差转换为天数、小时数、分钟数和秒数 var days = Math.floor(timeDiff / (24 * 60 * 60 * 1000)); var hours = Math.floor((timeDiff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); var minutes = Math.floor((timeDiff % (60 * 60 * 1000)) / (60 * 1000)); var seconds = Math.floor((timeDiff % (60 * 1000)) / 1000); // 更新页面上的倒计时 document.getElementById("countdown").innerHTML = "距离 " + targetDate.toLocaleString() + " 还有 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒"; } // 每秒钟更新一次倒计时 setInterval(updateCountdown, 1000); </script> </body> </html> ``` 这个示例代码实现了一个倒计时功能,目标日期为 2022 年 1 月 1 日 0 点。页面上会显示距离目标日期还有多少天、多少小时、多少分钟和多少秒,每秒钟自动更新一次。当倒计时结束后,页面上会显示 "倒计时结束!"。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr阁主

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值