<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
<script>
onload = function(){
var Gtext = document.getElementById("box");
var Ga = document.getElementById("box1");
var Gb = document.getElementById("box2");
var Gc = document.getElementById("box3");
var n = 0; // 计时初始值
var timm = 0; // 全局变量保存计时器
Ga.onclick = function () { // 第一个点击事件
clearInterval(timm); // timm 永远都等于按钮按下的最新的计时器，所以每次都要在计时器开始时清除计时器
timm = setInterval(function () { // 计时器
n++;
var h = parseInt((n/3600))>=10?parseInt((n/3600)):"0"+parseInt((n/3600)); // 获取小时数
var f = parseInt((n/60%60))>=10?parseInt((n/60%60)):"0"+parseInt((n/60%60)); // 获取分钟
var s = parseInt((n%60))>=10?parseInt((n%60)):"0"+parseInt((n%60)); // 秒钟
Gtext.value = h+":"+f+":"+s; // 拼接
},10);
};
Gb.onclick = function () {
clearInterval(timm); // 永远停止最新的计时器。
}
Gc.onclick = function () {
Gtext.value = "00:00:00";
n=0;
}
};
</script>
<style>
div{
width: 1100px;
height: 1100px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body{
background: black;
}
#box{
height: 100px;
width: 200px;
border: 0;
font-weight: 700;
font-size: 30px;
text-align: center;
border-radius: 20px;
}
#box1,#box2,#box3{
width: 200px;
height: 100px;
border: 0;
font-size: 30px;
font-family: "微软雅黑";
font-weight: 700;
border-radius: 50%;
outline: 0;
}
</style>
</head>
<body>
<div>
<input id="box" type="text" value="00:00:00">
<input id="box1" type="button" value="开始">
<input id="box2" type="button" value="暂停">
<input id="box3" type="button" value="重置">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
<script>
onload = function(){
var Gtext = document.getElementById("box");
var Ga = document.getElementById("box1");
var Gb = document.getElementById("box2");
var Gc = document.getElementById("box3");
var n = 0; // 计时初始值
var timm = 0; // 全局变量保存计时器
Ga.onclick = function () { // 第一个点击事件
clearInterval(timm); // timm 永远都等于按钮按下的最新的计时器，所以每次都要在计时器开始时清除计时器
timm = setInterval(function () { // 计时器
n++;
var h = parseInt((n/3600))>=10?parseInt((n/3600)):"0"+parseInt((n/3600)); // 获取小时数
var f = parseInt((n/60%60))>=10?parseInt((n/60%60)):"0"+parseInt((n/60%60)); // 获取分钟
var s = parseInt((n%60))>=10?parseInt((n%60)):"0"+parseInt((n%60)); // 秒钟
Gtext.value = h+":"+f+":"+s; // 拼接
},10);
};
Gb.onclick = function () {
clearInterval(timm); // 永远停止最新的计时器。
}
Gc.onclick = function () {
Gtext.value = "00:00:00";
n=0;
}
};
</script>
<style>
div{
width: 1100px;
height: 1100px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body{
background: black;
}
#box{
height: 100px;
width: 200px;
border: 0;
font-weight: 700;
font-size: 30px;
text-align: center;
border-radius: 20px;
}
#box1,#box2,#box3{
width: 200px;
height: 100px;
border: 0;
font-size: 30px;
font-family: "微软雅黑";
font-weight: 700;
border-radius: 50%;
outline: 0;
}
</style>
</head>
<body>
<div>
<input id="box" type="text" value="00:00:00">
<input id="box1" type="button" value="开始">
<input id="box2" type="button" value="暂停">
<input id="box3" type="button" value="重置">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
