一、制作时间倒数器要求以及思路:
1.首先创建三个输入字段,分别是小时,分钟和秒,以及“开始”按钮。输入的初始值必须为0h 5m 0s。当用户输入小时,分钟和秒并单击“开始”按钮倒数计时器应开始工作时,“开始”按钮必须处于隐藏状态,并且您应显示“暂停”,“停止”和“重置”按钮。
2.当单击“暂停”按钮时,计时器必须暂停,并且“暂停”按钮的文本必须通过“恢复”进行更改。
当用户单击“继续”按钮时,倒数计时器继续工作,“继续”文本再次变为“暂停”。当单击停止时,计时器必须停止,并且仅显示单个按钮启动。输入的值必须再次更改为0h 5m 0s。
当单击重置时,计时器应从用户输入的值重新开始倒计时过程。
例如:如果用户输入的值是1小时22分33秒,然后单击“开始”按钮,并且10秒钟后(当计时器显示1小时22分23秒),则单击“重置”,则计时器应从1小时22分33秒开始重新工作。
3. 对输入和按钮使用引导样式
二、代码实现
1.创建index.html文件,在bootstrap.com网站上复制CSS和JS代码粘贴到index.html
/*css代码*/
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
/*JS代码*/
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
index.html文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间倒数器</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="main">
<div class="d-flex mb-3 inputs">
<div class="form-group">
<input id="hours" class="form-control form-control-lg" type="number" min=0 value="0" name="hours" />h
</div>
<div class="form-group">
<input id="minutes" class="form-control form-control-lg" type="number" min=0 value="5" name="minutes">m
</div>
<div class="form-group">
<input id="seconds" class="form-control form-control-lg" type="number" min=0 value="0" name="seconds">s
</div>
</div>
<div class="d-flex buttons justify-content-center">
<button class="btn btn-outline-primary btn-start-resume">Start</button> <!--开始按钮-->
<button class="btn btn-outline-primary btn-pause">Pause</button><!--暂停按钮-->
<button class="btn btn-outline-primary btn-stop">Stop</button><!--停止按钮-->
<button class="btn btn-outline-primary btn-reset">Reset</button><!--重启按钮-->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
2.创建app.js文件,代码如下
const hoursEl = document.querySelector('#hours');
const minutesEl = document.querySelector('#minutes');
const secondsEl = document.querySelector('#seconds');
const btnStart = document.querySelector('.btn-start-resume');
const btnPause = document.querySelector('.btn-pause');
const btnStop = document.querySelector('.btn-stop');
const btnReset = document.querySelector('.btn-reset');
let interval;
let pause = false;
let totalSeconds = 0;
let totalSecondsBackup = 0;
init();
function init() {
btnPause.style.display = 'none';
btnStop.style.display = 'none';
btnReset.style.display = 'none';
btnStart.addEventListener('click', () => {
const hours = parseInt(hoursEl.value);
const minutes = parseInt(minutesEl.value);
const seconds = parseInt(secondsEl.value);
totalSecondsBackup = totalSeconds = hours * 60 * 60 + minutes * 60 + seconds;
if (totalSeconds < 0) {
return;
}
startTimer();
btnPause.style.display = 'inline-block';
btnStop.style.display = 'inline-block';
btnReset.style.display = 'inline-block';
btnStart.style.display = 'none';
});
btnPause.addEventListener('click', () => {
pause = !pause;
if (pause) {
btnPause.innerText = 'Resume';
} else {
btnPause.innerText = 'Pause';
}
})
btnStop.addEventListener('click', () => {
stopTimer();
totalSeconds = totalSecondsBackup;
pause = false;
updateInputs();
btnPause.style.display = 'none';
btnStop.style.display = 'none';
btnReset.style.display = 'none';
btnStart.style.display = '';
})
btnReset.addEventListener('click', () => {
totalSeconds = totalSecondsBackup;
updateInputs();
})
}
function startTimer() {
interval = setInterval(() => {
if (pause) return;
totalSeconds--;
updateInputs();
if (totalSeconds <= 0) {
stopTimer();
}
}, 1000)
}
function stopTimer() {
interval = clearInterval(interval);
}
function updateInputs() {
const hours = Math.floor(totalSeconds / 60 / 60);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
hoursEl.value = hours;
minutesEl.value = minutes;
secondsEl.value = seconds;
}
3.创建app.css文件,文件代码如下
body {
padding: 50px;
}
.inputs {
justify-content: center;
}
.inputs .form-control {
margin: 0 10px;
}
.inputs .form-group {
display: inline-flex;
margin: 0 15px;
align-items: flex-end;
}
.buttons .btn{
margin: 0 15px;
}