javaScript实现倒计时效果

效果图：

整体思路分析：

• 获取当前的事件对象

• 获取未来某一个时间点的时间对象

• 计算时间差

• 算数的方式算出几天几小时几分

<style>
    div{
      width: 500px;
      height: 50px;
      margin: 50px auto;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      color: red;
    }
  </style>

<div id="box"></div>

<script>
    // 时间差，现在到未来的某一个时间点的时间差
    function getDiff(time1,time2){
      // 获取时间对象的时间戳
      time1 = time1.getTime()
      time2 = time2.getTime()

      // 计算出两个时间戳的时间差  毫秒数
      var cha = Math.round((time2-time1)/1000);

      // 根据cha的时间差算出  相差是几天
      // 用 cha/一天的秒数 然后取整就是相差的天数
      var days = parseInt(cha/(24*60*60))
      // console.log(days);
      // cha - days的秒数 得到不足一天秒数 
      //  (cha - days的秒数)/一小时的秒数  取整就是小时数
      var hours = parseInt((cha-days*24*60*60)/(60*60))

      // 计算分钟数
      // cha%(60*60) 得到不足一小时的秒数 
      var minutes = parseInt((cha%(60*60))/60)  

      // 计算秒数
      // cha%60 就是不足一分钟的秒数
      var seconds = cha%60

      var str = "倒计时："+days+"天"+hours+"小时"+minutes+"分"+seconds+"秒";
      return str;
    }
    var time2 = new Date('2022-2-1')
    
    // 春节倒计时
    setInterval(function(){
      var time1 = new Date()
      // box.innerText 表示标签中的文本
      box.innerText = getDiff(time1,time2)
    },1000)
  </script>