【Vue入门实战5】前端各种时间转换操作 ==＞【页面时钟】当前时间计时器 ==＞【秒杀】时间倒计时

假话全不说，真话不全说。

目录

一、前端各种时间转化

1.ISO时间格式

2.时间戳

3.转化为标准日期格式

（1）方法一  yyyy年MM月dd日 hh:mm:ss

（2）方法二  yyyy-MM-dd hh:mm和yyyy-MM-dd通用

二、页面时钟-实时展示时间

 1.使用v-html

2.修改格式效果

3.设置定时器

三、秒杀时间差倒计时

1.页面布局

 2.修改格式效果

3.设置定时器

---

一、前端各种时间转化

1.ISO时间格式

new Date();

let date = new Date();
console.log("new Date()", date); //Tue Apr 26 2022 14:03:18 GMT+0800 (中国标准时间)

2.时间戳

new Date().getTime();

Unix时间戳，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。

let date2 = new Date().getTime();
console.log("new Date().getTime()", date2); 
//时间戳1650953148789  getTime()返回数值的单位是毫秒

3.转化为标准日期格式

ISO或者时间戳格式转化为标准格式

（1）方法一  yyyy年MM月dd日 hh:mm:ss

// 获取当前时间
    dateTime(date) {
      let data = new Date(date);
      let formatDateTime;
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      formatDateTime =
        Y + "年" + M + "月" + D + "日" + H + ":" + Min + ":" + S;
      return formatDateTime;
    },

// 2022年4月26日 14:46:37

（2）方法二  yyyy-MM-dd hh:mm和yyyy-MM-dd通用

formatDate(data, fmt) {
      let date = new Date(data);
      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 : this.padLeftZero(str)
          );
        }
      }
      return fmt;
    },

padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },

console.log(
        this.formatDate(new Date(), "yyyy-MM-dd hh:mm"),
        this.formatDate(new Date(), "yyyy-MM-dd")
      );

// 2022-04-26 14:48 
// 2022-04-26

二、页面时钟-实时展示时间

效果：

 1.使用v-html

v-html 用来更新元素的 innerHTML

<span class="cur-date" v-html="dateFormatStr"></span>

内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

2.修改格式效果

// 年月日 时分秒 星期
    dealWithTime(date) {
      let data = new Date(date);
      let formatDateTime;

      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      switch (W) {
        case 0:
          W = "日";
          break;
        case 1:
          W = "一";
          break;
        case 2:
          W = "二";
          break;
        case 3:
          W = "三";
          break;
        case 4:
          W = "四";
          break;
        case 5:
          W = "五";
          break;
        case 6:
          W = "六";
          break;
        default:
          break;
      }

      this.dateFormatStr =
        Y +
        "<span >" +
        " 年 " +
        "</span>" +
        M +
        "<span >" +
        " 月 " +
        "</span>" +
        D +
        "<span>" +
        " 日 / " +
        "</span>" +
        "<span >" +
        " 星期" +
        W +
        " / " +
        "</span>" +
        "<span >" +
        H +
        ":" +
        Min +
        ":" +
        S;
      ("</span>");

      /* setInterval("dealWithTime()",1000);*/
    },

3.设置定时器

在当前页面的mounted函数中创建并执行定时器

 //创建并执行定时器
    let _this = this;
    this.timer = setInterval(() => {
      _this.dealWithTime(new Date());
    }, 1000);

注意：在beforeDestoryed函数中需要销毁定时器

beforeDestroy() {
    clearInterval(this.timer);
  },

三、秒杀时间差倒计时

效果：

  

1.页面布局

id做唯一标识 分别表示 日 时分秒

<div class="status-top">
            <div>
              <span id="_d">00</span>
              <span id="_h">00</span>
              <span id="_m">00</span>
              <span id="_s">00</span>
            </div>
</div>
<div class="status-bottom">应急时间</div>

 2.修改格式效果

this.accidentTime表示标准时间，now = date.getTime();表示当前时间，使用accidentTime-now就得到:从开始运行到现在过去的时间。

同理，设置截止时间endDate = new Date(‘2022-4-14 5:20:21’)，now = date.getTime();表示当前时间，使用end-now就可以得到剩余时间。

 

// 年月日 时分秒 星期 this.acctidentTime 此处为设置的标准时间
countTime(data) {
      if (this.accidentTime) {
        let date = new Date(data);
        //获取当前时间
        // console.log("====countTime", this.accidentTime);
        // var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date(this.accidentTime);
        var end = endDate.getTime();
        //时间差
        var leftTime = now - end;
        //定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
          m = Math.floor((leftTime / 1000 / 60) % 60);
          s = Math.floor((leftTime / 1000) % 60);
        }
        //将倒计时赋值到div中
        document.getElementById("_d").innerHTML = d + "天";
        document.getElementById("_h").innerHTML = h + "时";
        document.getElementById("_m").innerHTML = m + "分";
        document.getElementById("_s").innerHTML = s + "秒";
        //递归每秒调用countTime方法，显示动态时间效果
        // setTimeout(countTime, 1000);
      }
    },

3.设置定时器

//创建并执行定时器
let _this = this;
this.timer = setInterval(() => {
        _this.countTime(new Date());
}, 1000);