时间格式化相关

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)

 时间格式化

 let date = new Date();
    let fmt = "yyyy年MM月dd日  hh:mm:ss";
    console.log(formatDate(date, fmt))



    function formatDate(date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
            }
        }
        return fmt;
    }

    function padLeftZero(str) {
        return ('00' + str).substr(str.length)
    }

 获取星期几

/**
 * 获取星期
 */
export function formatWeeksDate(time) {
  if (time === undefined || '' || time === null) {
    return
  }
  time = time.replace(/T/g, ' ')
  const date = new Date(time)
  let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  let wk = date.getDay() //getDay() 方法可返回表示星期的某一天的数字
  return weeks[wk]
}

 

聊天室场景下的时间格式化

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string}
 */
export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()

  const diff = (now - d) / 1000

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
  }
}

 计算两个时间的差值

export function getDiffT1Now(t1) {
  var date1 = t1 //开始时间
  var date2 = new Date() //结束时间
  var date3 = date2.getTime() - new Date(date1.replace(/-/g, '/')).getTime() //时间差的毫秒数
  date3 = Math.abs(date3)
  //计算出相差天数
  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)
  if (days >= 0 && days <= 9) {
    days = '0' + days
  }
  if (hours >= 0 && hours <= 9) {
    hours = '0' + hours
  }
  if (minutes >= 0 && minutes <= 9) {
    minutes = '0' + minutes
  }
  if (seconds >= 0 && seconds <= 9) {
    seconds = '0' + seconds
  }
  return days + '天' + hours + '时' + minutes + '分' + seconds + '秒'
}

　　

 

 创建Date对象的兼容性问题

// window和安卓支持，ios和mac不支持
new Date('2020-11-26'); 
// window和安卓支持，ios和mac支持
new Date('2020/11/26');

 

 ...