Js倒计时功能

今天分享一个简单实用的前端功能“倒计时”，相信大家做前端的多多少少都遇到过倒计时的需求，虽然现在网上设计好的倒计时插件一大堆，随便拿一个就能完成任务了。但是这个需求最好是自己动手写一个比较好。

接下来代码展示：

<script type="text/javascript">
  // 获取活动结束的时间
  var startTime = $('.count-down-time').data('starttime');
  

  // 以startTime为结束时间，实现倒计时
  var endTime = new Date(startTime);
  var nowTime = new Date(); // 获取当前的时间
  var time = endTime.getTime() - nowTime.getTime(); // 计算时间差


  if(time > 0){
   var timer = setInterval(function(){
      time -= 1000;
        
      // 转换时间
      var day = Math.floor(time / (1000 * 60 * 60 * 24));
      var hour = Math.floor(time / (1000 * 60 * 60));
      var minute = Math.floor(time / (1000 * 60)) % 60 + 1;
      var second = Math.floor(time / 1000) % 60;
  
  
      // 不满两位数时前面补0
      if(day < 10){
        day = '0' + day;
      }
      if(hour < 10){
        hour = '0' + hour;
      }
      if(minute < 10){
        minute = '0' + minute;
      }
      if(second < 10){
        second = '0' + second;
      }
      
      // 渲染到元素上
      $('.countdown-hours').text( hour );
      $('.countdown-minutes').text( minute );
      $('.countdown-seconds').text( second );
    
  }else{
    // clearInterval(this.timer);
  }  
</script>

代码这展示js部分，样式根据自己的喜好来自己设计就行。简单的倒计时功能就完成了，有兴趣的可以在此基础上进一步完善倒计时功能。