JS简易计时器
程序员文章站
2022-05-31 10:50:12
...
JS简易计时器
涉及功能：
- 动态加载下拉框
- ES6拼接html字符串
- 定时器的设置和清除
- str.padStart(targetLength [, padString])
问题总结：
- JS字符串拼接：传统拼接用“ ” 和 + 来拼接；ES6用 ` (反引号，不是单引号！！！）标识，用${ }引用变量，{ }可引用表达式（对象，数组，函数等）。
- padStart(2, ‘0’) 字符串补全长度。padStart()用于头部补全，padEnd()用于尾部补全。
var hourChoose = document.getElementById("hour");
var minChoose = document.getElementById("min");
var secChoose = document.getElementById("sec");
var timer = 0;
//动态加载下拉框
function setSelect(el, num) {
for (var i = 0; i < num; i++) {
el.innerHTML += `<option value ="${i}">${i}</option>`; //` `ES6拼接html字符串,用${i}替换了+'i'+
}
}
setSelect(hourChoose, 24);
setSelect(minChoose, 60);
setSelect(secChoose, 60);
var startBtn = document.querySelector(".btn_start");
var continueBtn = document.querySelector(".btn_continue");
var pauseBtn = document.querySelector(".btn_pause");
var resetBtn = document.querySelector(".btn_reset");
startBtn.onclick = function() {
//获取值
var hour = hourChoose.value;
var min = minChoose.value;
var sec = secChoose.value;
// console.log(hour,min,sec);
//计算总时间
var totalNum = hour * 3600 / 1 + min * 60 / 1 + sec / 1;
//设置定时器
timer = setInterval(function() {
//时间结束时清除定时器,否则值为负
if (totalNum == 0) {
clearInterval(timer);
alert("⏲计时结束!!!");
return;
}
totalNum--;
rederTime(totalNum);
}, 1000)
}
var time_hour=document.getElementById('time_hour');
var time_min=document.getElementById('time_min');
var time_sec=document.getElementById('time_sec');
continueBtn.onclick=function(){
var hour=time_hour.innerHTML;
var min=time_min.innerHTML;
var sec=time_sec.innerHTML;
var totalNum = hour * 3600 / 1 + min * 60 / 1 + sec / 1;
timer = setInterval(function() {
if (totalNum == 0) {
clearInterval(timer);
alert("⏲计时结束!!!");
return;
}
totalNum--;
rederTime(totalNum);
}, 1000)
}
pauseBtn.onclick=function(){
clearInterval(timer);
}
resetBtn.onclick=function(){
clearInterval(timer);
rederTime(0);
}
//设置事件渲染数据
function rederTime(num) {
//转换时分秒 str.padStart(targetLength [, padString])用另一个字符串填充当前字符串,填充从当前字符串的开始(左侧)
var hour = parseInt(num / 3600).toString().padStart(2, '0');
var min = parseInt((num - hour * 3600) / 60).toString().padStart(2,'0');
var sec = parseInt(num % 60).toString().padStart(2, '0');
time_hour.innerHTML = hour;
time_min.innerHTML = min;
time_sec.innerHTML = sec;
}
html代码：
<body>
<div id="home">
<select id="hour">
</select>
<label>时</label>
<select id="min">
</select>
<label>分</label>
<select id="sec">
</select>
<label>秒</label>
<button class="btn_start">开始</button>
<button class="btn_pause">暂停</button>
<button class="btn_continue">继续</button>
<button class="btn_reset">清零</button>
</div>
<div id="box">
<div id="time_hour">00</div>
<div id="point">:</div>
<div id="time_min">00</div>
<div id="point">:</div>
<div id="time_sec">00</div>
</div>
<script src="01.js" type="text/javascript" charset="utf-8"></script>
</body>
css代码：
#home{
display: flex;
justify-content: center;
margin-top: 10%;
border-radius: 5px;
}
#hour{
width: 100px;
height: 30px;
padding: 6px 12px;
}
#min{
width: 100px;
height: 30px;
}
#sec{
width: 100px;
height: 30px;
}
label{
font-size: 20px;
margin-right: 15px;
}
.btn_start{
width: 100px;
height: 30px;
border-radius: 5px;
margin-left: 20px;
margin-right: 5px;
color:white;
background-color: aquamarine;
}
.btn_reset{
width: 100px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
color:white;
background-color: #FF557F;
}
.btn_continue{
width: 100px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
color: wheat;
background-color: aqua;
}
.btn_pause{
width: 100px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
color:wheat;
background-color: aqua;
}
#box{
display: flex;
justify-content: center;
margin-top: 100px;
}
#box>div{
font-size: 200px;
color: #ff557f;
}