JS实现点击按钮显示倒计时
在JavaScript中,你可以创建一个简单的倒计时功能,当点击一个按钮时显示倒计时。以下是实现这一功能的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时按钮</title>
<script>
// 设置倒计时的全局变量
var count = 10;
// 倒计时函数
function countdown() {
var counter = document.getElementById("counter");
counter.innerHTML = count;
if (count > 0) {
count--;
// 在1秒后调用函数本身
setTimeout(countdown, 1000);
}
}
</script>
</head>
<body>
<p>倒计时: <span id="counter">10</span>秒</p>
<button onclick="countdown()">开始倒计时</button>
</body>
</html>
在这个例子中,当页面加载时,倒计时的初始值设置为10秒。当点击按钮时,countdown
函数被触发,并且每隔1秒更新显示的倒计时数字。当倒计时结束时,计数停止。你可以根据需要调整初始的倒计时时间。
评论已关闭