时分秒计时器 js

佚名 6年前 (2019-04-26) 随笔 1101人围观抢沙发百度已收录

<!DOCTYPE html> 　　<html lang="en"> 　　　　<head> 　　　　　　<meta charset="UTF-8"> 　　　　　　<title>时分秒计时器</title> 　　　　　　　　<script> 　　　　　　　　　　// 初始值　　　　　　　　　　var flag=true; 　　　　　　　　　　var h=m=s=0; 　　　　　　　　　　var Init; 　　　　　　　　　　function timers(){ 　　　　　　　　　　　　s=s+1; 　　　　　　　　　　　　if(s>=60){ 　　　　　　　　　　　　　　s=00; 　　　　　　　　　　　　　　m=m+1 　　　　　　　　　　　　} 　　　　　　　　　　　　if(m>=60){ 　　　　　　　　　　　　　　m=00; 　　　　　　　　　　　　　　h=h+1; 　　　　　　　　　　　　} 　　　　　　　　//两种表现形式　　　　　　　　document.getElementById('timetext').value= `${h<10?('0'+h):h}时${m<10?('0'+m):m}分${s<10?('0'+s):s}秒`; 　　　　　　　　document.getElementById('_h').innerHTML=`${h<10?('0' + h):h}时` 　　　　　　　　document.getElementById('_m').innerHTML=`${m<10?('0' + m):m}分` 　　　　　　　　document.getElementById('_s').innerHTML=`${s<10?('0' + s):s}秒` 　　　　　　　} 　　　　　　// 开始计时器　　　　　　function start(){ 　　　　　　　　if(flag){　　　　　　　　　　　init = setInterval(timers,1000) 　　　　　　　　} 　　　　　　　　flag=false 　　　　　　} 　　　　　　// 重置计时器　　　　　　function Reset(){ 　　　　　　　　flag=true 　　　　　　　　window.clearInterval(init) 　　　　　　　　h=m=s=0; 　　　　　　　　document.getElementById('timetext').value= "00时00分00秒"; 　　　　　　　　document.getElementById('_h').innerHTML='00时' 　　　　　　　　document.getElementById('_m').innerHTML='00分' 　　　　　　　　document.getElementById('_s').innerHTML='00秒' 　　　　　　} 　　　　　　// 暂停计时器　　　　　　function stop(){ 　　　　　　flag=true 　　　　　　window.clearInterval(init) 　　　　　　} 　　</script> </head> <body> 　　<div style="text-align: center"> 　　　　<input type="text" id="timetext" value="00时00分00秒" readonly><br> 　　　　<span id="_h">00时</span> 　　　　<span id="_m">00分</span> 　　　　<span id="_s">00秒</span> 　　　　<button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button> 　　</div> </body> </html>