我正在使用JQuery从60设置一个计数器,它工作得很好。除了当它在第一轮递减计数并达到零时,当我重置它时,它首先显示零,然后从60开始。我希望它在重置后立即从60开始。有什么想法吗?
这是我的代码(这是示例代码,其结果与原始代码相同)



    $("#Resend-confirm-phone-number-code").hide();
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
    function aliAsghar() {
        $("#Resend-confirm-phone-number-code").hide();
        var count = 60,
            timer = setInterval(function () {
                $("#counter").html(--count);
                if (count == 0) {
                    clearInterval(timer);
                    $("#resend").fadeOut("fast", function () { });
                    $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
                }
            },
                1000);
        $("#resend").show();
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="newRegister-helpText">
            <p>
                enter the code
            </p>
        </div>
        <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
            <div class="formElement newRegister-input">
                <i class="fa fa-key"></i>
                <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput"
                    placeholder="enter the code">
                <div class="newRegister-alarmText">

                    <p id="resend"> seconds left<span id="counter" >60</span></p>

                    <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none; " onclick="aliAsghar()">
                        <i class="fa fa-refresh"></i>
                        send again
                    </button>

                </div>
            </div>
            <div class="newRegister-button">
                <button type="button" id="send-confirm-phone-number-code" class="animateBtn" >
                    <i class="fa fa-check"></i>
                    submit
                </button>
            </div>
        </form>
    </div>

最佳答案

您可以通过在首次调用函数时以及在间隔的第一次迭代发生之前立即使用count值更新元素的HTML来解决此问题。

然后,您可以通过在页面加载时简单地调用aliAsghar()来干燥逻辑,而不必将相同的逻辑两次复制到该页面中。

请注意,应尽可能避免在HTML中的on*事件属性上使用不引人注目的事件处理程序,并应避免在fadeX()调用中删除空的回调函数(这不是必需的)。



function aliAsghar() {
  $("#Resend-confirm-phone-number-code").hide();
  var count = 5; // set to 5 just to speed up testing
  $("#counter").html(count);

  var timer = setInterval(function() {
    $("#counter").html(--count);
    if (count == 0) {
      clearInterval(timer);
      $("#resend").fadeOut("fast");
      $("#Resend-confirm-phone-number-code").fadeIn("fast");
    }
  }, 1000);
  $("#resend").show();
}

aliAsghar(); // onload
$('#Resend-confirm-phone-number-code').click(function() {
  aliAsghar();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="newRegister-helpText">
    <p>
      enter the code
    </p>
  </div>
  <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
    <div class="formElement newRegister-input">
      <i class="fa fa-key"></i>
      <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput" placeholder="enter the code">
      <div class="newRegister-alarmText">
        <p id="resend"> seconds left<span id="counter">60</span></p>
        <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none;">
          <i class="fa fa-refresh"></i>
          send again
        </button>
      </div>
    </div>
    <div class="newRegister-button">
      <button type="button" id="send-confirm-phone-number-code" class="animateBtn">
        <i class="fa fa-check"></i>
        submit
      </button>
    </div>
  </form>
</div>

关于javascript - 重置后,jquery计数器显示为零,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55589342/

10-14 19:16
查看更多