如何在倒计时日期过期后禁用按钮

Question

请问，当倒计时日期到期时，我如何禁用HTML表单按钮，我可以创建倒计时日期，但我真的不知道如何在倒计时显示后禁用该按钮"过期"；。

// The output of the count-down date
<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button>Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 22, 2022 11:34:38")  .getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " days remaining" ;

// If the count down is over, write some text 
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>

Answer 1

给按钮ID并使用此

document.getElementById(BUTTON_ID).disabled = true;

使用此代码：

<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button id="button">Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 22, 2022 11:34:38")  .getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " days remaining" ;

// If the count down is over, write some text 
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById("button").disabled = true;
}
}, 1000);
</script>

Answer 2

您需要将disabled属性设置为"真"；。你能试试下面的例子吗？

if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.querySelector('#button').disabled = true;
}

https://www.w3schools.com/tags/att_button_disabled.asp

Answer 3

您可以在Jquery或Javascript中添加任意一行：

// in JQuery
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
$("#button").attr("disabled", true);
}
// in JS
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById(BUTTON_ID).disabled = true;
}

Answer 4

设置button's disabled attribute to true。

<!-- // The output of the count-down date -->
<div class="value text-danger" id="demo"></div>

<!-- //html form button -->
<form>
<input s type="text" placeholder="your full name">
<button id="btn">Join</button>
</form>

<!-- // count down JavaScript -->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 24, 2022 11:34:38")  .getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " days remaining" ;
let btn = document.getElementById("btn");

// If the count down is over, write some text 
if (distance <= 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
btn.disabled = true;
}
}, 1000);
</script>