简单的说一下这个秒表,它由 开始 、 暂停 、 继续 、 重置4个按钮控制的
话不多说,干活走起
展示图:
HTML && CSS 代码:
<style>
*{
padding: 0;
margin: 0;
}
#div1{
width: 400px;
height: 600px;
background-color: hotpink;
margin: 100px auto;
font-size: 20px;
border-radius: 50px;
text-align: center;
}
#div1 div{
box-sizing: border-box;
text-align: center;
padding-top: 120px;
margin-bottom: 120px;
}
#div1 div span{
width: 50px;
height: 50px;
background-color: cyan;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
border-radius: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
}
button{
width: 100px;
height: 50px;
font-size: 20px;
margin: 20px 20px;
border-radius: 20px;
/* border: none; */
}
</style>
</head>
<body>
<div id="div1">
<div>
<span>00</span>时 <span>00</span>分 <span>00</span>秒
</div>
<button>开始</button>
<button>暂停</button><br>
<button>继续</button>
<button>重置</button>
</div>
<body>
JavaScript 代码:
<script>
// 获取按钮
var oBth0 = document.querySelectorAll('button')[0];
var oBth1 = document.querySelectorAll('button')[1];
var oBth2 = document.querySelectorAll('button')[2];
var oBth3 = document.querySelectorAll('button')[3];
// console.log(oBth0);
// 获取时分秒的输入框属性值
var oSp0 = document.querySelectorAll('span')[0]
var oSp1 = document.querySelectorAll('span')[1]
var oSp2 = document.querySelectorAll('span')[2]
// 设定 初始值
var start = 0;
// 设定 定时器 的值
var now = 0;
// 创建 开始按钮 的点击事件
oBth0.onclick = function () {
now = setInterval(function () {
start++;
var oSp0Hour = parseInt(start / 60 / 60); //总秒数除以分、秒,得整数就是 小时数
var oSp1Min = parseInt((start / 60) % 60); //获取 分钟数
var oSp2Sec = parseInt(start % 60); //获取秒数 ,总秒数除以 60 ,取余得秒
//个位数时 数值前面 加一个 ‘0’
// 时
if (oSp0Hour < 10) {
oSp0.innerHTML = '0' + oSp0Hour;
} else {
oSp0.innerHTML = oSp0Hour;
}
// 分
if (oSp1Min < 10) {
oSp1.innerHTML = '0' + oSp1Min;
} else {
oSp1.innerHTML = oSp1Min;
}
// 秒
if (oSp2Sec < 10) {
oSp2.innerHTML = '0' + oSp2Sec;
} else {
oSp2.innerHTML = oSp2Sec;
}
}, 1000)
}
// 创建 暂停按钮 的点击事件
oBth1.onclick = function(){
clearInterval(now);
}
// 创建 继续按钮 的点击事件
oBth2.onclick = function(){
now = setInterval(function () {
start++;
var oSp0Hour = parseInt(start / 60 / 60); //总秒数除以分、秒,得整数就是 小时数
var oSp1Min = parseInt((start / 60) % 60); //获取 分钟数
var oSp2Sec = parseInt(start % 60); //获取秒数 ,总秒数除以 60 ,取余得秒
//个位数时 数值前面 加一个 ‘0’
// 时
if (oSp0Hour < 10) {
oSp0.innerHTML = '0' + oSp0Hour;
} else {
oSp0.innerHTML = oSp0Hour;
}
// 分
if (oSp1Min < 10) {
oSp1.innerHTML = '0' + oSp1Min;
} else {
oSp1.innerHTML = oSp1Min;
}
// 秒
if (oSp2Sec < 10) {
oSp2.innerHTML = '0' + oSp2Sec;
} else {
oSp2.innerHTML = oSp2Sec;
}
}, 1000)
}
// 创建 重置按钮 的点击事件
oBth3.onclick = function(){
// 将 数值重新赋值
start = 0;
// 停止 定时器
clearInterval(now);
// 重新给 时、分、秒 赋值
oSp0.innerHTML = '00';
oSp1.innerHTML = '00';
oSp2.innerHTML = '00';
}
</script>