项目会议室项目中用到 计时功能，简单的封装了一个类 Timer
<body><div><div class="time_meter"><span id="tm_hour">00</span><span>:</span><span id="tm_min">00</span><span>:</span><span id="tm_sec">00</span><button id="tm_btn">开始</button><button id="tm_reset">重置</button></div></div></body><script src="./timer.js"></script><script>function $(id) {return document.getElementById(id)}let timer = new Timer()let isTimer = false;$('tm_btn').onclick = function () {if (isTimer) {timer.toPause()this.innerHTML = '开始'} else {timer.toStart()this.innerHTML = '暂停'}}$('tm_reset').onclick = timer.toReset</script>
timer.js
class Timer{constructor(){this.i = 0;this.timer = null;this.isRunning = false;this.init()}$(id) {return document.getElementById(id)}doubleNumber(num) {if (num < 10) {return '0' + num} else {return num}}start() {this.timer = setInterval(() => {this.i++;this.$("tm_sec").innerHTML =this.doubleNumber(this.i % 60)this.$("tm_min").innerHTML =this.doubleNumber(parseInt((this.i / 60) % 60))this.$("tm_hour").innerHTML =this.doubleNumber(parseInt((this.i / 3600) % 60))}, 1000)}toPause() {clearInterval(this.timer)}toStart() {if (!this.isRunning) {this.start()this.isRunning = true} else {this.toPause()this.isRunning = false}}toReset() {this.i = 0;clearInterval(this.timer)$('tm_sec').innerHTML = '00'$("tm_min").innerHTML = '00'$("tm_hour").innerHTML = '00'}init(){this.toStart=this.toStart.bind(this)this.toPause=this.toPause.bind(this)this.toReset=this.toReset.bind(this)}}
