时分秒计时器 js
2024-10-15 04:22:42
<!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>
最新文章
- 数据类型之记录(record)..With XXX do begin... end;
- 3种用组策略将域帐号加入本地管理员组的方法_jinifly_新浪博客
- 为什么swing不适合做桌面软件
- 网站常用css必备css reset
- MSSQL SERVER 2008 R2 无法连接到数据库,用户sa登录失败，错误：18456
- 利用Node.js实现模拟Session验证的登陆
- 简易 bokeh 图像散景效果算法实现
- [UOJ UNR#2 黎明前的巧克力]
- Linux 文件系统下的压缩、解压命令
- Event Recommendation Engine Challenge分步解析第六步
- tomcat 报错处理
- vue子父组件的通信
- 鸡头兔头共20，脚56，鸡兔各有多少？算法实 php现版
- ASP.NET中Page_Load()与Page_Init()的区别
- iOS开发——iOS7（及以后版本） SDK自带二维码（含条形码）扫码、二维码生成
- 洛谷 3784(bzoj 4913) [SDOI2017]遗忘的集合——多项式求ln+MTT
- iOS中重用UITableView单元格时，千万别忘了这个
- HBase学习之深入理解Memstore-6
- nodejs初印象
- Java开发必用的工具包