使用js定时器显示倒计时5秒,秒数字体颜色为红色,然后显示新年快乐
时间: 2024-11-12 15:42:49 浏览: 4
STM32F103C8T6单片机开发板实验之元旦60秒倒计时(OLED显示)
你可以使用JavaScript的`setInterval`函数创建一个倒计时功能,并结合DOM操作改变文字的颜色。下面是一个简单的示例:
```javascript
// 设置倒计时结束时间(这里是5秒)
var countDownDate = new Date().getTime() + 5000; // 5000毫秒等于5秒
function countdown() {
var now = new Date().getTime();
var distance = countDownDate - now;
// 判断是否到达零点
if (distance < 0) {
clearInterval(intervalId); // 清除定时器
document.getElementById("countdown").innerText = "新年快乐";
document.getElementById("countdown").style.color = "black"; // 将颜色变为黑色
} else {
// 计算剩余秒数并显示
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerText = seconds + " 秒";
// 如果秒数小于10,添加前导零
if (seconds < 10) {
document.getElementById("countdown").innerText = "0" + seconds;
}
// 定义秒数字体颜色为红色
document.getElementById("countdown").style.color = "red";
}
}
// 创建一个定时器
var intervalId = setInterval(countdown, 1000);
```
在这个例子中,我们首先设置了一个倒计时的开始时间和结束时间。然后,每隔一秒更新一次倒计时,如果倒计时结束,就停止定时器,显示“新年快乐”并将其颜色更改为黑色。
别忘了在HTML中添加一个元素用于显示倒计时,例如:
```html
<p id="countdown">5 秒</p>
```
阅读全文