js实现简单的秒表

js写一个计时器，用了vue的框架，所以和参考地址：https://blog.csdn.net/qlwangcong518/article/details/85055389 不同；

为了不让时间戳的毫秒级单位影响到体验，我用了Date.parse(new Date())，实际上用new Date().getTime()应该更精确一些。

<body>
  <div id="app">
    <div class="audio-tools-top">
      <div v-html="audioText"></div>
    </div>
    <div class="audio-tools-bottom">
      <div class="time-html" v-html="showTime"></div>
      <button @click="clickPause" v-if="audioStatus"><i class="layui-icon layui-icon-pause"></i></button>
      <button @click="clickPlay" v-else><i class="layui-icon layui-icon-play"></i></button>
      <button @click="goToFileList">结束会议</button>
    </div>
  </div>
</body>

<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        audioStatus: false,
        audioText: null,
        t: null,
        showTime: '00:00:00',
        startTime: null,
        pauseTime: null,
        firstTime: null,
        pauseDurationTime: 0
      }
    },
    methods: {
      goToFileList () {
        window.location.href = '/history.html'
      },
      timeUpdate () {
        this.startTime = Date.parse(new Date())
        let durationTime = this.startTime - this.firstTime
        console.log('总共过去了' + durationTime + 'ms')
        if (this.pauseTime) {
          this.pauseDurationTime += this.startTime - this.pauseTime
        }
        console.log('总共停止了'+ this.pauseDurationTime + 'ms')
        this.handlerDurationTime(durationTime - this.pauseDurationTime)
        let _this = this
        this.t = setTimeout(function () {
          _this.timeUpdate()
          }, 1000);
      },
      clickPlay () {
        if (!this.firstTime) {
          this.firstTime = Date.parse(new Date())
        }
        this.timeUpdate()
        this.audioStatus = !this.audioStatus
        this.pauseTime = null
      },
      clickPause() {
        this.pauseTime = Date.parse(new Date())
        this.audioStatus = !this.audioStatus
        clearTimeout(this.t)
      },
      handlerDurationTime (times) {
        var hours = Math.floor(times / (3600 * 1000));//毫秒转化为小时
        var minutes = Math.floor((times - hours * 3600 * 1000) / 60000 );//毫秒转化为分钟
        var seconds = Math.floor((times - hours * 3600 * 1000 - minutes * 60000) / 1000);//已知分钟
        this.showTime =
          (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":"
          + (seconds < 10 ? "0" + seconds : seconds)
      }
    },
    watch: {
      audioStatus () {
        console.log(this.audioStatus)
      },
      pauseDurationTime () {
        console.log(this.pauseDurationTime)
      }
    }
  })
</script>

<body>

</div>

</div>

</body>

new Vue({

el: '#app',

data() {

return {

audioStatus: false,

audioText: null,

t: null,

showTime: '00:00:00',

startTime: null,

pauseTime: null,

firstTime: null,

pauseDurationTime: 0

}

methods: {

goToFileList () {

window.location.href = '/history.html'

timeUpdate () {

this.startTime = Date.parse(new Date())

let durationTime = this.startTime - this.firstTime

console.log('总共过去了' + durationTime + 'ms')

if (this.pauseTime) {

this.pauseDurationTime += this.startTime - this.pauseTime

}

console.log('总共停止了'+ this.pauseDurationTime + 'ms')

this.handlerDurationTime(durationTime - this.pauseDurationTime)

let _this = this

this.t = setTimeout(function () {

_this.timeUpdate()

}, 1000);

clickPlay () {

if (!this.firstTime) {

this.firstTime = Date.parse(new Date())

}

this.timeUpdate()

this.audioStatus = !this.audioStatus

this.pauseTime = null

clickPause() {

this.pauseTime = Date.parse(new Date())

this.audioStatus = !this.audioStatus

clearTimeout(this.t)

handlerDurationTime (times) {

var hours = Math.floor(times / (3600 * 1000));//毫秒转化为小时

var minutes = Math.floor((times - hours * 3600 * 1000) / 60000 );//毫秒转化为分钟

var seconds = Math.floor((times - hours * 3600 * 1000 - minutes * 60000) / 1000);//已知分钟

this.showTime =

(hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":"

+ (seconds < 10 ? "0" + seconds : seconds)

}

watch: {

audioStatus () {

console.log(this.audioStatus)

pauseDurationTime () {

console.log(this.pauseDurationTime)

}

})

</script>