实现商品秒杀成功后【前端实时更新待支付倒计时结束时间】

JoneClassMate

已于 2023-01-03 22:08:19 修改

阅读量593

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-31 23:59:50 首次发布

本文链接：https://blog.csdn.net/m0_63300795/article/details/128509701

版权

此次案例是在用户秒杀下单后未支付的情况下在页面实时显示根据后端传过来的待支付结束时间倒计时

代码可完全复制粘贴！

（只需修改 buyTime变量里面的值，在真实情况下值是从后端接口获取到的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 展示倒计时 -->
<div class="js_time_txt">
</div>
<!-- 因为系统时间和待支付倒计时不在一个js里面，所以这是定义的标记标签用于待支付倒计时获取系统当前时间 -->
<span id="time" style="display: none;"></span>

<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<!-- 实时获取系统当前时间js部分 -->
<script>
    function getCurrentTime() {
    let nowTime = new Date(),
		year = nowTime.getFullYear(),
		month = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (nowTime.getMonth() + 1),
		day = nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate(),
		hours = nowTime.getHours() >= 10 ? nowTime.getHours() : '0' + nowTime.getHours(),
		minute = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes(),
		second = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds(),
		currentTime = "";
	currentTime = year + '-' + month + '-' + day + " " + hours + ":" + minute + ":" + second;
    $("#time").html(currentTime)
    //console.log("系统当前时间"+currentTime);
}
  
// 定义定时器：一秒执行一次（一秒更新一次）
setInterval(function(){
	getCurrentTime();
},1000); 

</script>

<!-- 待支付商品实时倒计时js部分 -->
<script>

    $(function () {
    // 定义定时器：一秒更新一次
    setInterval(function(){
        var _ordertimer = null;
        var data = new Date();
        var txt = $('.js_time_txt');
        //1.从后端接口获取待支付商品的结束时间(仅只需从后端接口获取待支付结束时间即可！！！)
        var buyTime = '2023-09-20 22:23:45'; 
        //2.获取系统当前时间，倒计时规则：待支付结束时间-系统当前时间来进行时间实时刷新
        var nowTime=$("#time").html();
        var dateDiff = new Date(nowTime) - new Date(getnow()); //请求时间戳与本地时间戳
        if (dateDiff < 0) {
            dateDiff = Math.abs(dateDiff);
        }

        if (new Date(nowTime) > new Date(buyTime)) {
            $('.time-range').hide();
            return;
        } else {
            leftTimer(buyTime);
            _ordertimer = setInterval(function () {
                leftTimer(buyTime)
            }, 1000);
        }

        // 获取当前时间 xxxx/xx/xx 00:00:00
        function getnow() {
            var year = data.getFullYear();
            var month = parseInt(data.getMonth() + 1) >= 10 ? parseInt(data.getMonth() + 1) : '0' + parseInt(data.getMonth() + 1);
            var day = data.getDate();
            var hours = data.getHours();
            var minutes = data.getMinutes();
            var seconds = data.getSeconds();
            var now = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            return now;
        }

        function leftTimer(enddate) {

            var leftTime = (new Date(enddate)) - new Date + dateDiff;

            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
            days = checkTime(days);
            hours = checkTime(hours);
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);

            if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0)
                txt.html(days + "天" + hours + "小时" + minutes + "分" + seconds + "秒");
            if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
                window.clearInterval(_ordertimer);
                _ordertimer = null;
            }
        }

        // 将0-9的数字前面加上0，例1变为01
        function checkTime(i) { 
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    },1000);
    //定时器结尾部分
})
   
    
</script>

</body>
</html>