阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 双十一倒计时更准确

      思路

      核心:要用 结束时间 - 系统当前时间 来计算

      当然 系统当前时间可能不准确 可以和服务器做个同步

      定时器本身就不准,timeout是在限定时间内,interval是在限定时间后。

      chrome为了优化网页性能,使得用户在离开网页后,暂停网页的计时器、运动等耗性能的部分,故此问题只能使用异步解决,使得计时线程在后台一直运行

      前端的计时逻辑永远不会准,即便你初始化时间采用服务器时间。

      因为网络传输误差你不知道,同时setTimeoutsetInterval并不会非常精确,所以不要依赖前端计时器来处理重要逻辑,需要结合后台来保障。

      逻辑代码

      function fn () {
        var date1 = new Date();//可以借助服务器辅助时间
        var date2 = new Date(2022, 11, 11, 0, 0, 0);
        var minutesVal = 60 * 1000;
        var dateValue = date2.getTime() - date1.getTime();
        var days = Math.floor(dateValue / (24 * 60 * minutesVal));
        var hoursValue = dateValue % (24 * 60 * minutesVal);
        var hours = Math.floor(hoursValue / (60 * minutesVal));
        var minutesValue = hoursValue % (60 * minutesVal);
        var minutes = Math.floor(minutesValue / minutesVal);
        var secondValue = minutesValue % (minutesVal);
        var second = Math.floor(secondValue / 1000);
        return {
          days: days,
          hours: hours,
          minutes: minutes,
          second: second
        }
      }
      var diffTime = fn();
      var str = `相差 ${diffTime.days}${diffTime.hours}小时 ${diffTime.minutes}${diffTime.second}秒`;
      console.log(str);
      // document.write(str);
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录