这里使用的Promise很简单,在Promise实例后面的then有两个参数,第一个参数是异步访问成功之后执行的函数,第二个参数是异步访问失败之后执行的函数.

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>基于服务器事件的倒计时</title>
    6.     <style>
    7.         .timeBox{
    8.             margin: 20px auto;
    9.             width: 300px;
    10.             height: 50px;
    11.             line-height: 50px;
    12.             text-align: center;
    13.             border: 1px dashed lightblue;
    14.             font-size: 12px;
    15.         }
    17.         .timeBox span {
    18.             color: lightcoral;
    19.             font-weight: bolder;
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24. <div class="timeBox">
    25.     距离抢购还剩
    26.     <span>-- : -- : --</span>
    27. </div>
    28. <script type="text/javascript">
    29.     let _serverTime = null;
    30.     let timeBox = document.querySelector('.timeBox')
    31.     let timeSpan = timeBox.querySelector('span');
    32.     let autoTime = null;
    33.     //获取时间
    34.     let getServerTime = function getServerTime(){
    35.         if (_serverTime) {
    36.             _serverTime = new Date(_serverTime.getTime() + 1000);
    37.             return _serverTime;
    38.         }
    39.         return new Promise(resolve => {
    40.             let xhr = new XMLHttpRequest(),
    41.                 serverTime = null;
    42.             xhr.open('HEAD', 'count_down.html');
    43.             xhr.onreadystatechange = () => {
    44.                 if (xhr.readyState === 2) {
    45.                     serverTime = new Date(xhr.getResponseHeader('date'));
    46.                     _serverTime = serverTime;
    47.                     resolve(serverTime);
    48.                 }
    49.             }
    50.             xhr.send(null);
    51.         });
    52.     };
    54.     //计算倒计时
    55.     let computedTime = function computedTime (){
    56.         let promise = getServerTime();
    57.         promise instanceof Promise ? promise.then(f()) : f(promise);
    58.         function f(serverTime) {
    59.             let nowTime = serverTime,
    60.                 tarTime = new Date('2019/02/24 20:00:00'),
    61.                 diffTime = tarTime - nowTime;
    63.             if (diffTime >= 0) {
    64.                 let hours = Math.floor(diffTime / (1000 * 60 * 60));
    65.                 diffTime = diffTime - hours * (1000 * 60 * 60);
    66.                 let minutes = Math.floor(diffTime / (1000 * 60));
    67.                 diffTime = diffTime - minutes * (1000 * 60);
    68.                 let seconed = Math.floor(diffTime / 1000);
    70.                 hours < 10 ? hours = '0' + hours : null;
    71.                 minutes < 10 ? minutes = '0' + minutes : null;
    72.                 seconed < 10 ? seconed = '0' + seconed : null;
    74.                 timeSpan.innerHTML = `${hours} : ${minutes} : ${seconed}`;
    75.                 return;
    76.             }
    77.             timeSpan.innerHTML = '-- : -- : --';
    78.             clearInterval(autoTime);
    79.         }
    80.     };
    82.     computedTime();
    83.     autoTime = setInterval(computedTime, 1000);
    84. </script>
    85. </body>
    86. </html>