重置后，jquery计数器显示为零

时间：2019-04-09 09:22:56

标签： javascript jquery

我正在使用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>

2 个答案:

答案 0 :(得分：1)

您可以通过在首次调用函数时以及在间隔的第一次迭代发生之前立即使用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>

答案 1 :(得分：1)

简单设置：$('#counter').text( "60" ); 

$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
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();
    $('#counter').text( "60" );
    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" ></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>

要简化代码，您只需调用函数即可：

/*$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
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();*/
aliAsghar();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    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" ></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>

相关问题
最新问题