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

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

代码可完全复制粘贴！

（只需修改 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:00function 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变为01function checkTime(i) { if (i < 10) {i = "0" + i;}return i;}},1000);//定时器结尾部分
})</script></body>
</html>

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

更新完服务器维护什么时候结束,绝地求生3月13日正式服维护公告：2019更新内容以及维护结束时间什么时候_蚕豆网新闻...
本文导航第1页:(一) 第3页:(三) 不少玩家都很感兴趣绝地求生3月13日更新内容抢先知道,因此针对这个问题给各位介绍一番维护时间也别忘了绝地求生3月13日更新到几点? 为了1.0版本的第七轮更新 ...
s19服务器维护到什么时候,绝地求生3月13日正式服维护公告：2019更新内容以及维护结束时间什么时候_蚕豆网新闻...
本文导航第1页:(一) 第3页:(三) 不少玩家都很感兴趣绝地求生3月13日更新内容抢先知道,因此针对这个问题给各位介绍一番维护时间也别忘了绝地求生3月13日更新到几点? 为了1.0版本的第七轮更新 ...
前端如何实现后端运行进度_前端实时更新后端处理进度之进度条实现
情景需求在做图形提交界面时,点击提交按钮后,系统需要较长时间做处理,前端需要动态显示处理进度,并在完成后显示处理结果实现逻辑 1.点击按钮后向后台发送数据处理请求2.后台处理数据3.前端获取后端处 ...
网络驱动器映射成功但无法实时更新文件需要重新连接_无边界办公——WebDAV文件共享服务构建...
WebDAV (Web-based Distributed Authoring and Versioning) 是一种基于HTTP1.1协议的通信协议.它扩展了HTTP 1.1,在GET.POST.H ...
c++某商店开展买一送一活动，购买两件商品时，只需支付价格较高的商品的金额。要求程序在输入两个商品的价格后，输出所应支付的金额，请根据裁判程序编写函数cut，将代码补充完整。
#include using namespace std; //请在此处添加代码 int cut(float x, float y) { float max; max = (x > y) ? x ...
web前端处理订单待支付倒计时计算显示问题
在商城类项目的时候,有很多待支付的订单,有时候在订单列表页面会分别显示倒计时,就是页面会有很多倒计时的订单. 处理方法: 1.调用后端接口拿到所有的订单,获取所有的倒计时订单,获取到期时间(尽量时间戳 ...
电商项目实战之商品秒杀
电商项目实战之商品秒杀定时任务 corn表达式实现方式基于注解基于接口实战秒杀系统秒杀系统关注问题秒杀架构设计商品上架获取当前秒杀商品获取当前商品的秒杀信息秒杀最终处理参考链 ...
java 秒杀代码_Java秒杀系统实战系列~商品秒杀代码实战
摘要: 本篇博文是"Java秒杀系统实战系列文章"的第六篇,本篇博文我们将进入整个秒杀系统核心功能模块的代码开发,即"商品秒杀"功能模块的代码实战. 内容: & ...
java秒杀系统代码大全_Java秒杀系统：商品秒杀代码实战
内容: "商品秒杀"功能模块是建立在"商品详情"功能模块的基础之上,对于这一功能模块而言,其主要的核心流程在于:前端发起抢购请求,该请求将携带着一些请求数据:待 ...

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

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

最新文章

热门文章