刚学习完JavaScript的伙伴们可以通过小的案列练习一下,才能巩固知识,让你的编程水平成为班级最牛的人。
1.html结构
<div id="timer-message">Please select a timer before starting.</div>
<div class="container">
<div class="timer">
<h1>🍅 Pomodoro Timer</h1>
<div class="button-container">
<button class="button" id="pomodoro-session">Pomodoro</button>
<button class="button" id="short-break">Short Break</button>
<button class="button" id="long-break">Long break</button>
</div>
<div id="pomodoro-timer" class="timer-display" data-duration="25.00">
25:00
</div>
<div id="short-timer" class="timer-display" data-duration="5.00">
5:00
</div>
<div id="long-timer" class="timer-display" data-duration="10.00">
10:00
</div>
<div id="buttons">
<button id="start">开始</button>
<button id="stop">暂停</button>
</div>
</div>
</div>
2.css样式
body {
background-color: #1e213f;
color: #d7e0ff;
}
.container {
text-align: center;
width: 100%;
padding: 10px 0;
}
.timer {
display: inline-block;
padding: 10px;
width: 600px;
box-sizing: border-box;
}
h1 {
font-size: 2em;
width: 8ch;
margin: 20px auto;
}
.button-container {
margin-top: 20px;
display: flex;
justify-content: center;
}
.button {
background-color: #2e325a;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}
.button:hover {
background-color: #f87070;
}
.hidden {
display: block;
}
.timer-display {
font-size: 5em;
margin-top: 20px;
font-weight: bold;
}
#buttons {
margin-top: 20px;
}
#start,
#stop {
background-color: #2e325a;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin: 10px;
/* 手型 */
cursor: pointer;
}
#stop:hover {
background-color: tomato;
}
#start:hover {
background-color: #219a52;
}
#timer-message {
color: white;
background-color: tomato;
display: none;
padding: .5em;
font-size: 1em;
text-align: center;
border-radius: 1em;
}
3.js部分
流程分析:
1. 获取时间节点
let pomodoro = document.getElementById("pomodoro-timer");
let short = document.getElementById("short-timer");
let long = document.getElementById("long-timer");
2.封装时间显示与隐藏
function showDefaultTimer() {
pomodoro.style.display = "block";
short.style.display = "none";
long.style.display = "none";
}
showDefaultTimer()
3.获取button 遍历按钮,创建事件侦听器,用于侦听每个计时器按钮中的单击事件。首先声明一个变量,并将其值设置为 null。将指定当前正在运行的计时器。currentTimercurrentTimer
(1).遍历按钮
function hideAll(){
let timers = document.querySelectorAll(".timer-display");
timers.forEach(timer=> timer.style.display ="none")
};
(2)获取点击事件切换
let currentTimer =null;
接下来,创建事件侦听器,当用户单击按钮时将触发该侦听器。
document.getElementById("pomodoro-session").addEventListener("click", function(){
hideAll(); //调用函数
pomodoro.style.display = "block"
currentTimer = pomodoro
});
document.getElementById("short-break").addEventListener("click", function(){
hideAll();
short.style.display = "block"
currentTimer =short
});
document.getElementById("long-break").addEventListener("click", function(){
hideAll();
long.style.display = "block"
currentTimer =long
});
完整js代码
// 定义一个空的常量
let myInterval = null;
//使用剩余时间并每 1 秒(1000 毫秒)运行一次,直到剩余时间用完,使用每秒的剩余时间更新我们的显示。当计时器达到 0 时,我们将显示 00:00 并播放警报声
function startTimer(timerdisplay) {
if (myInterval) {
clearInterval(myInterval);
}
timerDuration = timerdisplay
.getAttribute("data-duration")
.split(":")[0];
console.log(timerDuration);
let durationinmiliseconds = timerDuration * 60 * 1000;
let endTimestamp = Date.now() + durationinmiliseconds;
//Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔。
myInterval = setInterval(function () {
const timeRemaining = new Date(endTimestamp - Date.now());
console.log(myInterval)
if (timeRemaining <= 0) {
clearInterval(myInterval);
timerdisplay.textContent = "00:00";
const alarm = new Audio(
"https://www.freespecialeffects.co.uk/soundfx/scifi/electronic.wav"
);
alarm.play();
} else {
const minutes = Math.floor(timeRemaining / 60000);
const seconds = ((timeRemaining % 60000) / 1000).toFixed(0);
const formattedTime = `${minutes}:${seconds
.toString()
.padStart(2, "0")}`;
console.log(formattedTime);
timerdisplay.textContent = formattedTime;
}
}, 1000);
}
document.getElementById("start").addEventListener("click", function () {
if (currentTimer) {
startTimer(currentTimer);
document.getElementById("timer-message").style.display = "none";
} else {
document.getElementById("timer-message").style.display = "block";
}
});
document.getElementById("stop").addEventListener("click", function () {
if (currentTimer) {
clearInterval(myInterval);
}
});
如果想提升你的编程水平就多加练习吧,在编程中碰到BUG也不要着急。有解决不了的问题可以加我的qq:2415714416。有需要毕设或是期末作业,我会满足您的需求的?