效果
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);//关闭定时器
}
}