时间戳

首页 > 解决方案 > 计时器到期后禁用按钮

jquery - 计时器到期后禁用按钮

问题描述

我没有使用<button>，<input type="button">我认为这有很大的不同吗？

我只是希望，如果倒计时已过期，<button>也将禁用，我不知道我的逻辑是否正确禁用按钮，但我的倒计时工作就像一个魅力

我的 html 中有这个脚本

<button  class="main-btn main-btn-2" id="invite"> <a  href="{% url 'add' %}?parent_ID={{ me.id }}"  rel="nofollow">Invite Now</a></button>

{% for timer in countdown %}
<script>
var countDownDate = new Date("{{timer.enddate}}").getTime();

var x = setInterval(function() {


  var now = new Date()

  var distance = countDownDate - now;

  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);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.getElementById("invite").disabled = true; // this is my logic if the timer expired the button will disabled
  }
}, 1000);
</script>
{% endfor %}

标签： jqueryhtml

解决方案

尝试这个

<a  href="{% url 'add' %}?parent_ID={{ me.id }}" style="color:white;"  rel="nofollow" ><input type="button" id="invite" value="Invite Now!" class="main-btn main-btn-2"></a>
{% for n in ako %}
<script>
var countDownDate = new Date("{{n.enddate}}").getTime();
var x = setInterval(function() {

  var now = new Date()


  var distance = countDownDate - now;

  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);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.getElementById("invite").disabled = true;
  }
}, 1000);
</script>
{% endfor %}

推荐阅读