js实现简单的秒表
js写一个计时器，用了vue的框架，所以和 参考地址：https://blog.csdn.net/qlwangcong518/article/details/85055389 不同；
为了不让时间戳的毫秒级单位影响到体验，我用了Date.parse(new Date())，实际上用new Date().getTime()应该更精确一些。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<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> |