下面我将为您提供“Javascript实现商品秒杀倒计时(时间与服务器时间同步)”的完整攻略。
商品秒杀倒计时的实现,需要做到倒计时精准,时间与服务器时间同步,同时要求倒计时显示页面美观、易于用户理解操作。
1.获取当前服务器时间,对服务器时间进行格式化处理,然后通过Ajax把获取到的时间发送给前端,以便前端进行倒计时的对比计算。代码示例:
//获取服务器时间
function getServerTime(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", "http://mydomain.com/getServerTime.php", false);
xhr.send(null);
if(xhr.status == 200){
return new Date(xhr.responseText.replace(/-/g,"/"));
}
}
// 格式化时间
function formatDate(date, formatStr){
var str = formatStr;
str = str.replace(/yyyy|YYYY/, date.getFullYear());
str = str.replace(/yy|YY/, (date.getYear() % 100) > 9 ? (date.getYear()%100).toString() : '0' + (date.getYear() % 100));
str = str.replace(/MM/, date.getMonth() > 9 ? date.getMonth().toString() : '0' + date.getMonth());
str = str.replace(/M/g, date.getMonth());
str = str.replace(/dd|DD/, date.getDate() > 9 ? date.getDate().toString() :'0' + date.getDate());
str = str.replace(/d|D/g, date.getDate());
str = str.replace(/hh|HH/, date.getHours() > 9 ? date.getHours().toString() : '0' + date.getHours());
str = str.replace(/h|H/g,date.getHours());
str = str.replace(/mm/, date.getMinutes() > 9 ? date.getMinutes().toString() : '0' + date.getMinutes());
str = str.replace(/m/g, date.getMinutes());
str = str.replace(/ss|SS/, date.getSeconds() > 9 ? date.getSeconds().toString() : '0' + date.getSeconds());
str = str.replace(/s|S/g, date.getSeconds());
return str;
}
2.前端获取到服务器时间后,设置倒计时器,通过定时器间隔1000ms(即1秒)的时间来计算倒计时还剩余多少时间,然后通过dom操作将倒计时时间显示在页面上。代码示例:
function countDown(serverTime, endTime, showDom){
var end = new Date(endTime);
var leftTime = end.getTime() - serverTime.getTime();
var leftsecond = parseInt(leftTime / 1000);
var day = Math.floor(leftsecond / (60 * 60 * 24));
var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
var second = Math.floor(leftsecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);
var formatTime = day + "天" + hour + "小时" + minute + "分" + second + "秒";
showDom.innerHTML = formatTime;
setTimeout(function(){
countDown(serverTime, endTime, showDom);
}, 1000);
}
3.在页面上通过HTML设置倒计时器显示区域,以及倒计时的结束时间。代码示例:
<div id="countDownDiv"></div>
<script type="text/javascript">
var serverTime = getServerTime();
var endTime = '2022-01-01 00:00:00'; //假设结束时间为2022年元旦0点
var showDom = document.getElementById('countDownDiv');
countDown(serverTime, endTime, showDom);
</script>
最终的商品秒杀倒计时实现效果,可以去我的个人网站上查看(地址:http://mydomain.com/countdown/),页面简洁美观,倒计时精准,时间与服务器时间同步,同时代码也比较清晰易于理解。
商品秒杀倒计时功能在电商网站上应用广泛,通过本文的讲解,相信大家可以对实现过程有一个清晰的认识,同时在实际项目应用中可以根据具体需求进行适当的调整和改造,使得倒计时功能更加完善。
本文链接:http://task.lmcjl.com/news/10804.html