最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可
<div></div> <script> myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; },500); </script>
倒计时
【1】简易倒计时
简易倒计时就是每1s通过setInterval将设置的时间减去1来达到要求
<div> <label for="set"><input type="number" step="1" value="0">秒</label> <button>确定</button> <button>重置</button> </div> <script> var timer; reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(timer) return; set.setAttribute('disabled','disabled'); timer = setInterval(function(){ if(Number(set.value) === 0){ clearInterval(timer); timer = 0; set.removeAttribute('disabled'); return; } set.value = Number(set.value) - 1; },1000); } </script>
【2】精确倒计时
由定时器的运行机制，我们知道每间隔1000ms去改变时间的作法并不可靠。更精确地做法，应该是与系统的运行时间作为参照，倒计时的时间变化与系统的时间变化同步，达到精确倒计时的效果
[注意]此部分中，需要通过取模运算和除法运算进行时、分、秒的计算，详细情况移步至此
<div> <label for="hour"><input type="number" min="0" max="23" step="1" value="0" />时</label> <label for="minute"><input type="number" min="0" max="59" step="1" value="0" />分</label> <label for="second"><input type="number" min="0" max="23" step="1" value="0" />秒</label> <button>确定</button> <button>重置</button> </div> <script> var timer; //输入限制 hour.onchange = function(){ if(Number(this.value) !== Number(this.value)) this.value = 0; if(this.value > 23) this.value = 23; if(this.value < 0) this.value = 0; } second.onchange = minute.onchange = function(){ if(Number(this.value) !== Number(this.value)) this.value = 0; if(this.value > 59) this.value = 59; if(this.value < 0) this.value = 0; } reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(timer) return; for(var i = 0; i < 3; i++){ myDiv.getElementsByTagName('input')[i].setAttribute('disabled','disabled'); } //原始储存值 var setOri = hour.value*3600 + minute.value*60 + second.value*1; //原始系统时间值 var timeOri = (new Date()).getTime(); //现在所剩时间值 var setNow; cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn(){ //当前系统时间值 var timeNow = (new Date()).getTime(); //使系统时间的差值与设置时间的差值相等，来获得正常的时间变化 setNow = setOri - Math.floor((timeNow - timeOri)/1000); hour.value = Math.floor((setNow%86400)/3600); minute.value = Math.floor((setNow%3600)/60); second.value = Math.floor(setNow%60); timer = requestAnimationFrame(fn); if(setNow==0){ cancelAnimationFrame(timer); timer = 0; btn.innerHTML = '计时结束'; for(var i = 0; i < 3; i++){ myDiv.getElementsByTagName('input')[i].removeAttribute('disabled'); } setTimeout(function(){ btn.innerHTML = '确定'; },1000) } }) } </script>
秒表
【1】简易秒表
秒表与倒计时的思路相同，相比而言，更加简单。每间隔100ms增加100ms即可
<div> <label for="set"><input value="0"></label> <button>开始</button> <button>重置</button> </div> <script> var timer; var con = 'off'; var num = 0; reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(con === 'off'){ set.setAttribute('disabled','disabled'); con = 'on'; btn.innerHTML = '暂停'; timer = setInterval(function(){ num+= 100; var minute = Math.floor(num/1000/60); var second = Math.floor(num/1000); var ms = Math.floor(num%1000)/100; set.value = minute + ' : ' + second + ' . ' + ms; },100); }else{ clearInterval(timer); con = 'off'; btn.innerHTML = '开始'; } } </script>
【2】精确秒表
与倒计时类似，使用计时器的时间间隔作为时间变化的参照是不准确的。更精确的做法，应该是使用系统的时间变化作为秒表的变化的参照