Javascript实现商品秒杀倒计时（时间与服务器时间同步）

下面我将为您提供“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/），页面简洁美观，倒计时精准，时间与服务器时间同步，同时代码也比较清晰易于理解。

四、总结

商品秒杀倒计时功能在电商网站上应用广泛，通过本文的讲解，相信大家可以对实现过程有一个清晰的认识，同时在实际项目应用中可以根据具体需求进行适当的调整和改造，使得倒计时功能更加完善。