倒计时

html部分

       <div class="count_down">
            <div class="z_time">
                <div class="clock">
                    活动倒计时
                </div>
                <div class="time">
                    <span class="day1">0</span>
                    <span class="day2">0</span>
                    <i>天</i>
                    <span class="hour1">0</span>
                    <span class="hour2">0</span>
                    <i>时</i>
                    <span class="minute1">0</span>
                    <span class="minute2">0</span>
                    <i>分</i>
                    <span class="seconds1">0</span>
                    <span class="seconds2">0</span>
                    <i>秒</i>
                </div>
            </div>
        </div>

js部分

var starttime = Date.parse(new Date('2020/7/16'));
        var timeArr;
        var timer = setInterval(function () {
            timeArr = [];
            var nowtime = Date.parse(new Date());
            var time = starttime - nowtime;
            if (time <= 0) {
                clearInterval(timer);
                $('.time').html('探店活动已结束');
                return;
            }
            var day = parseInt(time / 1000 / 60 / 60 / 24);
            day = day >= 10 ? day : '0' + day;
            var hour = parseInt(time / 1000 / 60 / 60 % 24);
            hour = hour >= 10 ? hour : '0' + hour;
            var minute = parseInt(time / 1000 / 60 % 60);
            minute = minute >= 10 ? minute : '0' + minute;
            var seconds = parseInt(time / 1000 % 60);
            seconds = seconds >= 10 ? seconds : '0' + seconds;
            var str = day.toString() + hour.toString() + minute.toString() + seconds.toString();
            $('.day1').text(str[0]);
            $('.day2').text(str[1]);
            $('.hour1').text(str[2]);
            $('.hour2').text(str[3]);
            $('.minute1').text(str[4]);
            $('.minute2').text(str[5]);
            $('.seconds1').text(str[6]);
            $('.seconds2').text(str[7]);
        }, 1000);

方法2

var date1=new Date();  //开始时间，当前时间
var date2=new Date(); //结束时间，需传入时间参数
var date3=date2.getTime()-date1.getTime();  //时间差的毫秒数
//计算出相差天数
var days=Math.floor(date3/(24*3600*1000));
//计算出小时数
var leave1=date3%(24*3600*1000);    //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000);        //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒");

...

方法3  window.requestAnimationFrame  代替  setInterval()

优点1:避免重复渲染隐藏元素

　　2:一次集中DOM进行渲染 ,该回调函数会在浏览器下一次重绘之前执行

var startTime = new Date('2020/10/13 10:25:10').getTime() //new Date().getTime();
//  4 3600 * 4
var continueTime = 100000;
var T = null;
//  获取页面元素
var timeTag = document.getElementById('time'),
  descTag = document.getElementById('desc'),
  hourTag = document.getElementById('hour'),
  minuteTag = document.getElementById('minute'),
  secondTag = document.getElementById('second');


//  用于返回距离活动开始或者结束的文案和时间
function getTime(time, continueTime) {
  var result = {
    // times 22：00 场
    // desc 
    // hour
    // minute
    // second
  }
  var targetTime = new Date(time);
  var targetHour = targetTime.getHours();
  var targetMinute = targetTime.getMinutes();
  result.time = (targetHour < 10 ? '0' + targetHour : targetHour) + ':' + (targetMinute < 10 ? '0' + targetMinute : targetMinute) + "场";


  var nowTime = new Date().getTime();
  var chargeTime = null;
  if (nowTime < time) { // 当前时间小于活动开始时间
    chargeTime = (time - nowTime) / 1000;
    result.desc = "距离开始还有";
  } else if (nowTime < time + continueTime) { // 在活动区间内
    chargeTime = (time + continueTime - nowTime) / 1000;
    result.desc = "距离结束还有";
  } else { // 活动已经结束
    result.desc = "活动已经结束";
    result.hour = result.minute = result.second = 0;
    cancelAnimationFrame(T)
    // clearInterval(T);
    return result;
  }
  //   3599000 => h:m:s => 0 : 59 : 59
  result.hour = Math.floor(chargeTime / 3600);
  result.minute = Math.floor(chargeTime % 3600 / 60); // 不足一个小时(取余) 除以六十 向下取整
  result.second = Math.floor(chargeTime % 60);
  return result;
}


function formatTime(time) {
  if (time.hour < 10) {
    time.hour = '0' + time.hour;
  }
  if (time.minute < 10) {
    time.minute = '0' + time.minute;
  }
  if (time.second < 10) {
    time.second = '0' + time.second;
  }
}


function renderByTime() {
  var resultTime = getTime(startTime, continueTime);
  formatTime(resultTime);
  (timeTag.innerHTML != resultTime.time) && (timeTag.innerHTML = resultTime.time);
  (descTag.innerHTML != resultTime.desc) && (descTag.innerHTML = resultTime.desc);
  (hourTag.innerHTML != resultTime.hour) && (hourTag.innerHTML = resultTime.hour);
  (minuteTag.innerHTML != resultTime.minute) && (minuteTag.innerHTML = resultTime.minute);
  (secondTag.innerHTML != resultTime.second) && (secondTag.innerHTML = resultTime.second);
  window.requestAnimationFrame(renderByTime)
}
window.requestAnimationFrame(renderByTime)

 ...