前端时间格式化

时间函数封装

fmtDate(time = new Date()) {
      Date.prototype.Format = function (fmt) {
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'H+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), //毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
        return fmt
      }
      return time.Format('yyyy-MM-dd HH:mm:ss')
    },

使用

// 默认 40 分钟的倒计时
laterTime() {
    // 40分钟后的时间
    var fmtTime = this.fmtDate()
    var time = new Date(fmtTime.replace('-', '/'))
    console.log('time:' + time)
    var min = 40
    time.setMinutes(time.getMinutes() + min, time.getSeconds(), 0)
    console.log('time:' + time)
    // 40分钟后的时间: console.log('164:' + this.fmtDate(time))
    sessionStorage.setItem('inputTime', this.fmtDate(time))
},

倒计时实现

// 倒计时实现
getTime(date = '2022-12-20 22:10:00') {
    date = sessionStorage.getItem('inputTime')
    // 返回的是用户输入时间总毫秒数
    var inputDate = +new Date(date)
    // 返回当前时间的总毫秒数
    var nowDate = +new Date()
    // times 剩余时间总的秒数
    var times = (inputDate - nowDate) / 1000
    var h = parseInt((times / 60 / 60) % 24)
    h = h < 10 ? '0' + h : h
    this.hour = h
    console.log('h: ' + this.hour)
    var m = parseInt((times / 60) % 60)
    m = m < 10 ? '0' + m : m
    this.minute = m
    var s = parseInt(times % 60)
    s = s < 10 ? '0' + s : s
    this.second = s
},
},

整体

<!--待优化 -->
<template>
  <div class="home">
      <el-card class="box-card">
        <el-tooltip
          class="item"
          effect="dark"
          content="Click to enter custom time"
          placement="top"
        >
          <h1 @click="inputTime" class="inputTime">Time Plan</h1>
        </el-tooltip>
        <p class="btn">
          <el-button @click="study">study-time</el-button> /
          <el-button type="info" @click="game"> game-time</el-button>
        </p>
        <h3 class="showTime">
          <span>{{ hour }}</span> H <span> {{ minute }}</span> M
          <span>{{ second }}</span> S
        </h3>
      </el-card>
      <el-timeline :class="{ active: isShow, game: isGame }" ref="timeLineRef">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>

      <el-dialog
        title="Time Management"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          please enter time: <el-input type="text" v-model="inputDate" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="saveTime">Submit</el-button>
        </span>
      </el-dialog>
      <el-card class="box-card dwn" :class="{ active: isShow }">
        <router-view />
      </el-card>
  </div>
</template>

<script>
var timer = null
var sessionTime =
  sessionStorage.getItem('inputTime') == null
    ? sessionStorage.setItem('inputTime', '2022-12-20 22:10:00')
    : sessionStorage.getItem('inputTime')
console.log(sessionTime)

var clearId = null
export default {
  data() {
    return {
      isShow: true, // display: none
      dialogVisible: false,
      hour: '00',
      minute: '00',
      second: '00',
      dialogVisible: false,
      inputDate: sessionTime,
      afterDate: '',
    }
  },
  created() {
    var date = sessionStorage.getItem('inputTime')
    this.getTime()
    clearId = setInterval(() => {
      this.getTime()
    }, 1000)
  },
  methods: {
    fmtDate(time = new Date()) {
      Date.prototype.Format = function (fmt) {
        var o = {
          'M+': this.getMonth() + 1, //月份
          'd+': this.getDate(), //日
          'H+': this.getHours(), //小时
          'm+': this.getMinutes(), //分
          's+': this.getSeconds(), //秒
          'q+': Math.floor((this.getMonth() + 3) / 3), //季度
          S: this.getMilliseconds(), //毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
        return fmt
      }
      return time.Format('yyyy-MM-dd HH:mm:ss')
    },
    // 默认 40 分钟
    laterTime() {
      // 40分钟后的时间
      var fmtTime = this.fmtDate()
      var time = new Date(fmtTime.replace('-', '/'))
      console.log('time:' + time)
      var min = 40
      time.setMinutes(time.getMinutes() + min, time.getSeconds(), 0)
      console.log('time:' + time)
      // 40分钟后的时间: console.log('164:' + this.fmtDate(time))
      sessionStorage.setItem('inputTime', this.fmtDate(time))
    },
    study() {
      this.isShow = !this.isShow
      if (!this.isShow) {
        this.$message.success(
          'The default learning time is 40 minutes, you can enter a custom time'
        )
        this.laterTime()
        this.getTime()
      } else {
          clearInterval(clearId)
          this.$message.info('Stop the timer')
      }
    },
    game() {
      console.log('game....')
      this.isGame = !this.isGame
      if (this.isGame) {
        this.$message.success(
          'The default game is 40 minutes, you can enter a custom time...........'
        )
        this.isShow = true
        this.isGame = true
        window.location.reload()
        this.laterTime()
        this.getTime()
        // 关闭显示 timeline
      } else {
        this.isShow = true
          clearInterval(clearId)
        this.$message.info('Stop the timer')
      }
    },
    inputTime() {
      this.dialogVisible = true
    },
    // 倒计时实现
    getTime(date = '2022-12-20 22:10:00') {
      date = sessionStorage.getItem('inputTime')
      // 返回的是用户输入时间总毫秒数
      var inputDate = +new Date(date)
      // 返回当前时间的总毫秒数
      var nowDate = +new Date()
      // times 剩余时间总的秒数
      var times = (inputDate - nowDate) / 1000
      var h = parseInt((times / 60 / 60) % 24)
      h = h < 10 ? '0' + h : h
      this.hour = h
      console.log('h: ' + this.hour)
      var m = parseInt((times / 60) % 60)
      m = m < 10 ? '0' + m : m
      this.minute = m
      var s = parseInt(times % 60)
      s = s < 10 ? '0' + s : s
      this.second = s
    },
  },
}
</script>

<style>
.home {
  width: 375px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  text-align: center;
  transform: translate(-10px);
}

.text {
  font-size: 12px;
}

.item {
  /* padding: 18px 0; */
}
.btn {
  margin-top: 13px;
}
.el-button {
  padding: 6px 4px !important;
}
.box-card {
  width: 330px !important;
  margin: -10px auto;
}
.el-timeline {
  margin: 30px !important;
}
.inputTime {
  cursor: pointer;
}
.inputTime:hover {
  color: orange;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}
.showTime {
  margin-top: 40px;
}
h3 span {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 5px;
  border-radius: 5px;
}
h3 span:hover {
  background-color: skyblue;
  transition: all 0.2s ease-out;
}
.el-timeline {
  margin-left: 10px;
}
.game,
.active {
  display: none;
}
.el-card {
  margin-left: 20px;
}
.dwn {
  height: 70px;
}
.el-dialog {
  position: fixed;
  width: 250px !important;
  margin: 60px;
}
</style>

渲染效果

渲染	自定义时间控制