js写一个十秒倒计时
时间: 2024-12-18 22:23:54 浏览: 56
JavaScript编写一个简单的十秒倒计时功能可以使用`setInterval`函数结合`Date`对象或者现代的`performance.now()`方法来实现。这是一个基础示例:
```javascript
let countDown = 10; // 倒计时总秒数
function countdown() {
if (countDown > 0) {
console.log(`倒计时:${countDown} 秒`);
countDown--;
setTimeout(countdown, 1000); // 每秒递减并延时1秒再次执行
} else {
clearInterval(intervalId); // 当倒计时结束时停止定时器
console.log('时间到!');
}
}
// 开始倒计时
const intervalId = setInterval(countdown, 1000);
```
这个脚本会在控制台每秒打印出剩余秒数,并在倒计时结束后显示“时间到!”。注意这里使用了`clearInterval(intervalId)`来清理定时器,避免内存泄漏。
相关问题
使用settimeout写一个10秒倒计时
可以使用 JavaScript 的 `setTimeout` 函数来实现倒计时。以下是一个简单的例子:
```javascript
let count = 10;
function countdown() {
console.log(count);
count--;
if (count < 0) {
clearInterval(timer);
console.log("倒计时结束!");
}
}
const timer = setInterval(countdown, 1000);
```
这段代码中,我们初始化了一个 `count` 变量为 10,然后定义了一个 `countdown` 函数,每次调用该函数时会将 `count` 减 1,并输出当前的倒计时数字。当 `count` 小于 0 时,清除定时器 `timer` 并输出倒计时结束的信息。
最后,我们使用 `setInterval` 函数每隔 1 秒钟调用一次 `countdown` 函数,从而实现了一个简单的 10 秒倒计时。
用js实现一个10秒倒计时,完整代码
好的,下面是用 JavaScript 实现一个 10 秒倒计时的完整代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>10秒倒计时</title>
</head>
<body>
<div id="countdown"></div>
<script type="text/javascript">
// 获取显示倒计时的元素
var countdownEl = document.getElementById("countdown");
// 设置倒计时的秒数
var seconds = 10;
// 定义一个定时器,每秒更新倒计时
var countdownTimer = setInterval(function() {
// 将秒数转化为 mm:ss 的格式
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
var formattedTime = minutes + ":" + remainingSeconds;
// 将倒计时显示在页面上
countdownEl.innerHTML = formattedTime;
// 倒计时结束后清除定时器
if (seconds == 0) {
clearInterval(countdownTimer);
countdownEl.innerHTML = "倒计时结束!";
}
// 每秒减少一秒
seconds--;
}, 1000);
</script>
</body>
</html>
```
这段代码会在页面上显示一个倒计时,每秒更新一次,直到倒计时结束。你可以在页面上添加更多元素和样式来美化倒计时的显示效果。
阅读全文
相关推荐















