Vue/JavaScript - 妙用（探索中...）

JavaScript

格式化时间：

((Date.parse(new Date) - Date.parse(new Date(createAt.substring(0, 19).split(/[A-Z|.]/).join(" ")))) / (24 * 3600 * 1000)).toFixed(1)

// 先把获得的时间截取有效时间，在找到相应正则转换为数组去除没用的字符
// 再拼接为字符串，此时Date()可以识别这串日期，识别后转换为格林时间秒
// 获取当前时间，转换成格林时间秒，减去计算的格林时间秒获得格林时间秒时差
// ÷（24小时 x 3600秒 x 1000）保留小数点后一位
// createAt = 2020-10-19T03:53:56.147Z 
// 返回到现在为止的时差
/* js格林威治时间转换成正常时间 */
changeTime(time) {
　　　　//time 为 '2020-06-15T07:23:17.000+0000'
      let time2 = this.myTime(time);
      let time3 = this.formatDateTime(time2);
      return time3; //time3 为转换后的时间 2020-06-15 15:23:14
    }, 
    myTime(date) {
      var arr = date.split("T");
      var d = arr[0];
      var darr = d.split("-");
      var t = arr[1];
      var tarr = t.split(".000");
      var marr = tarr[0].split(":");
      var dd =
        parseInt(darr[0]) +
        "/" +
        parseInt(darr[1]) +
        "/" +
        parseInt(darr[2]) +
        " " +
        parseInt(marr[0]) +
        ":" +
        parseInt(marr[1]) +
        ":" +
        parseInt(marr[2]);
      return dd;
    },
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    formatDateTime(date) {
      var time = new Date(Date.parse(date));
      time.setTime(time.setHours(time.getHours() + 8));
      // time.setTime(time.setHours(time.getHours()));
      var Y = time.getFullYear() + "-";
      var M = this.addZero(time.getMonth() + 1) + "-";
      var D = this.addZero(time.getDate()) + " ";
      var h = this.addZero(time.getHours()) + ":";
      var m = this.addZero(time.getMinutes()) + ":";
      var s = this.addZero(time.getSeconds());
      return Y + M + D + h + m + s;
    }
}

正则格式化时间：

var date = "2018-10-08 15:22:45";
//格式化掉  时分秒
var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(date);
//格式化掉秒
var newDate=/\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}/g.exec(date);

Date.parse()时间计算：

date=Date.parse(Date对象); // 精确到天
days=Math.floor(date/(24*3600*1000)) // 计算出相差天数
/* 24小时 x (60分钟x60秒=3600秒/小时) x 1000毫秒 然后向下取整 */
leave1=date%(24*3600*1000) // 计算出小时数
/* 计算出刚刚下舍的值 */
hours=Math.floor(leave1/(3600*1000)) // 计算天数后剩余的毫秒数
/* 3600秒/小时 x 1000毫秒 */
leave2=leave1%(3600*1000) // 计算相差分钟数

minutes=Math.floor(leave2/(60*1000)) // 计算小时数后剩余的毫秒数
/* 60秒 x 1000毫秒 */
leave3=leave2%(60*1000) // 计算相差秒数

seconds=Math.round(leave3/1000) // 计算分钟数后剩余的毫秒数

Vue

Vue计算两个时间的时差

<span class="bfe">{{((Date.parse(new Date) - Date.parse(new Date(createAt.substring(0, 19).split(/[A-Z|.]/).join(" ")))) / (24 * 3600 * 1000)).toFixed(1)}}</span>

<!-- createAt = 2020-10-19T03:53:56.147Z -->
<!-- 返回到现在为止的时差 -->

Vue for遍历

<template>
  <div>
    <video
      class="video"
      :style="{ backgroundImage: 'url(\'' + present.Cpic + '\')' }"
      controls="controls"
      :src="play.Vurl"
    ></video>
    <div class="top">
      <p>
        <span class="ico">字体设计</span><span>{{ present.Cname }}</span>
      </p>
      <p>难度等级：{{ Difficulty }} | 时长：{{ play.Vtime }}分钟</p>
    </div>
    <div class="catalog">
      <ul class="menu">
        <li :class="{ imT: type == '目录' }" @click="type = '目录'">目录</li>
        <li :class="{ imT: type == '详情' }" @click="type = '详情'">详情</li>
        <li :class="{ imT: type == '评论' }" @click="type = '评论'">
          评论（{{ Review }}）
        </li>
      </ul>
      <ul v-if="type == '目录'" class="list">
        <li
          v-for="list in present.Vlist"
          :key="list.ID"
          :class="{ ToPl: play.ID == list.ID }"
          @click="play = list"
        >
          {{ list.Vname }}
        </li>
      </ul>
      <ul v-if="type == '详情'" class="list">
        <li>{{ play.Vname }}</li>
      </ul>
      <ul v-if="type == '评论'" class="list">
        <li>还没有开放这个模块~</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "learn",
  data: () => {
    return {
      type: "目录",
      vID: "",
      play: {
        Vname: "",
        ID: "5f8d10b101d1a734304e2143",
        Vtime: "30",
        Vurl: ".......mp4",
        isViewed: false,
        isFinish: false
        present: {
          Vlist: [
          {
            Vname: "",
            ID: "5f8d10b101d1a734304e2143",
            Vtime: "30",
            Vurl:"....mp4",
            isViewed: false,
            isFinish: false
          },
          {
            Vname: "",
            ID: "5f8d10e801d1a734304e2145",
            Vtime: "25",
            Vurl:"",
            isViewed: false,
            isFinish: false
          }
        ],
        evaluate: [],
        isBuy: false,
        Cname: "",
        courseId: 5,
        Cdescribe: "",
        Cpic: "",
        Cprice: 300,
        Cdetails: ""
      },
      ...
    }
  }
</script>

---

欢迎大家提出需求问题，博主尽量简化代码并公开qwq