倒计时120到0然后页面样式交互
时间: 2023-07-29 09:11:40 浏览: 42
好的,以下是一个倒计时120到0,然后页面样式交互的 JavaScript 代码:
HTML:
```html
<div id="countdown"></div>
<button id="submit-btn" disabled>提交</button>
```
JavaScript:
```javascript
var countDownTime = 120; // 设定倒计时的时间,单位为秒
var countdown = setInterval(function() { // 每一秒执行一次
var countdownElement = document.getElementById("countdown"); // 获取倒计时元素
countdownElement.innerHTML = "距离结束还有 " + countDownTime + " 秒 "; // 更新倒计时元素内容
countDownTime--;
if (countDownTime < 0) { // 如果倒计时结束,清除计时器
clearInterval(countdown);
countdownElement.innerHTML = "倒计时已结束!";
document.getElementById("submit-btn").removeAttribute("disabled"); // 移除按钮的禁用状态
countdownElement.style.color = "red"; // 改变倒计时元素的颜色
}
}, 1000);
```
这个代码中,我们通过设定倒计时的时间为120秒,然后每一秒钟执行一次计算距离截止日期还有多久的操作,并更新倒计时元素的内容。最后,如果倒计时结束,我们清除了计时器并更新了倒计时元素的内容。同时,我们通过 `removeAttribute()` 函数来移除按钮的禁用状态,以实现页面交互。此外,我们还使用了 `style` 属性来改变倒计时元素的颜色。