timer--计时器
2024-09-28 03:24:12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>timer-计时器</title>
<style>
div{
width:300px;
margin:0 auto;
padding-top:60px;
}
#timer{
font-size:30px;
text-align:center;
}
#start{
font-weight:bold;
} </style>
<script>
var intervalId, //setInterval的id
pattern = /^\d$/, //正则模式,匹配单个数值
intervalSeconds = 1000, //调用setInterval的间隔时间,设置为 1000 毫秒,即 1 秒
secondIncrement = 0; //设置秒递增器起始值为 0 //注册页面加载事件
window.onload = function () {
var start = document.getElementById("start");
var timer = document.getElementById("timer"); function handleTimer() {
if (!intervalId) {
intervalId = setInterval(function () {
secondIncrement++;
//定义一个Date对象实例
var someDate = new Date("1111/1/1,0:0:0");
//设置秒数,当secondIncrement值超过59时,则分钟数会加1
someDate.setSeconds(secondIncrement); var hours = someDate.getHours();
hours = pattern.test(hours) ? "0" + hours + ":" : hours + ":";
var minutes = someDate.getMinutes();
minutes = pattern.test(minutes) ? "0" + minutes + ":" : minutes + ":";
var seconds = someDate.getSeconds();
seconds = pattern.test(seconds) ? "0" + seconds : seconds;
timer.value = hours + minutes + seconds;
}, intervalSeconds);
this.innerHTML = "Pause";
} else {
clearInterval(intervalId);
intervalId = null;
this.innerHTML = "Start";
}
} start.addEventListener("click", handleTimer, false); }
</script>
</head>
<body> <div>
<p><input type="text" id="timer" value="00:00:00" readonly/></p>
<button id="start">Start</button>
</div> </body>
</html>
最新文章
- 扩展jquery的选择器
- Unity粒子系统特性
- HTTP学习三:HTTPS
- 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)
- 关于kindeditor中点击图片后,滚动条往上顶的bug
- MD5的使用
- jQuery的插入
- 队列——解密QQ号
- 移动应用调试之 Inspect
- scp在Linux主机之间复制不用输入密码
- CStdioFile
- 苹果开发工具:Xcode和Interface Builder
- 【转】Please define the NDK_PROJECT_PATH variable to point to it
- C语言学习——C和Java语言不同点
- 安装supervisor
- rocketmq生产者代码分析
- react组件之间的通信
- 【问题解决方案】之 Word 公式编辑器 使用小tips
- HTTP响应过程
- JQuery基础-- Ajax