要实现计时器分钟命中某个目标时更改页面背景颜色的功能,你可以使用JavaScript来操作DOM。以下是一个简单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color on Timer Hit</title>
<style>
body {
transition: background-color 0.5s;
}
</style>
</head>
<body>
<h1>Timer Example</h1>
<p id="timer">00:00</p>
<script>
let timerElement = document.getElementById('timer');
let intervalId;
let minutesHitTarget = 5; // 设置目标分钟数
let seconds = 0;
let minutes = 0;
function updateTimerDisplay() {
timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function checkMinutesHit() {
if (minutes === minutesHitTarget) {
document.body.style.backgroundColor = getRandomColor();
}
}
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function startTimer() {
intervalId = setInterval(() => {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
}
updateTimerDisplay();
checkMinutesHit();
}, 1000);
}
startTimer();
</script>
</body>
</html>
setInterval
时,时间间隔设置正确。checkMinutesHit
函数是否正确执行,并且document.body.style.backgroundColor
是否正确设置。通过以上代码和解释,你应该能够实现计时器分钟命中目标时更改页面背景颜色的功能。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云