用js帮我实现一个输入毫秒数 开始倒计时的功能
时间: 2023-09-06 13:12:02 浏览: 92
利用js实现倒计时功能
以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
</head>
<body>
<label for="milliseconds">Enter milliseconds:</label>
<input type="text" id="milliseconds">
<button onclick="startCountdown()">Start Countdown</button>
<br><br>
<div id="countdown"></div>
<script>
// 获取输入框和倒计时显示区域的元素
let input = document.getElementById('milliseconds');
let countdown = document.getElementById('countdown');
// 开始倒计时函数
function startCountdown() {
let ms = parseInt(input.value); // 获取毫秒数
let seconds = Math.ceil(ms / 1000); // 将毫秒转换成秒,并向上取整
// 每秒更新倒计时显示区域
let countdownInterval = setInterval(() => {
seconds--;
countdown.innerHTML = seconds + ' seconds left';
if (seconds <= 0) {
clearInterval(countdownInterval); // 倒计时结束,清除定时器
countdown.innerHTML = 'Countdown finished'; // 显示倒计时结束信息
}
}, 1000);
}
</script>
</body>
</html>
```
这个程序首先获取输入框和倒计时显示区域的元素,然后定义了一个 `startCountdown` 函数来开始倒计时。该函数首先获取输入框中的毫秒数,并将其转换成秒数。然后使用 `setInterval` 函数每秒更新倒计时显示区域,直到倒计时结束。在倒计时结束时,清除定时器并显示倒计时结束信息。
阅读全文