<html> <head> <meta charset="utf-8"> <style> .timebox { border: 1px pink solid; width: 300px; height: 50px; text-align: center; margin: 0 auto; font-size: 20px; line-height: 50px; } </style> </head> <body> <div class="timebox"> 距离抢购时间还剩： <span>-- ：-- ：--</span> </div> </body> <script> let timebox = document.querySelector(".timebox"), timespan = document.querySelector("span"); function addZero(val) { return val < 10 ? '0' + val : val; } /* computeTime:接收服务器字符串打印离抢购的时间 @params:[String timeStr]服务器返回的时间字符串 @return： */ let computeTime = function (timeStr) { if (typeof timeStr === "undefined") { //此处不能用let声明变量，不然外部无法访问； var nowTime = new Date(); //当前客户端时间，后期需要换成服务端时间 } else { //字符串的处理，需要的同学可以参考下我的随笔 console.log(1); } let endTime = new Date('2019/8/16 18:00:00'), diffTime = endTime - nowTime; if (diffTime >= 0) { let hours = Math.floor(diffTime / (1000 * 60 * 60)); diffTime = diffTime - hours * 3600000; let minute = Math.floor(diffTime / (1000 * 60)); diffTime = diffTime - minute * 60000; let second = Math.floor(diffTime / 1000); timespan.innerHTML = `${addZero(hours)}:${addZero(minute)}:${addZero(second)}`; return; } timespan.innerHTML = '抢购开始'; }; setInterval(computeTime,1000); </script> </html>
基于服务器获取时间的思路：
1.第一次通过AJAX请求获取请求头的时间信息(xhr.readyState===2,而不用等整个请求的完成)，并用一个全局变量保存起来。
2.接下来不再次向服务器发送请求，每次执行computeTime函数，通过判断是否是服务器返回的时间如果是，手动的进行时间的增加。