html页面点击按钮,按钮在60秒内不能再按,并且倒计时显示在按钮上完整代码
时间: 2023-06-19 13:07:28 浏览: 120
点击按钮出现60秒倒计时的简单js代码(推荐)
以下是一个实现该功能的HTML、CSS和JavaScript代码:
HTML代码:
```html
<button id="myBtn">点击我</button>
```
CSS代码:
```css
#myBtn[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
```
JavaScript代码:
```javascript
var myBtn = document.getElementById("myBtn");
myBtn.onclick = function() {
myBtn.disabled = true;
var count = 60;
var countdown = setInterval(function() {
myBtn.innerHTML = "重新发送(" + count + ")";
count--;
if (count < 0) {
clearInterval(countdown);
myBtn.innerHTML = "点击我";
myBtn.disabled = false;
}
}, 1000);
};
```
当用户点击按钮时,我们使用`disabled`属性将按钮禁用,并启动一个计时器来进行倒计时。计时器每秒钟将更新按钮上的倒计时,并在倒计时结束时将按钮重新启用。CSS样式可以用来显示禁用按钮的样式。
阅读全文