Question

我正在尝试创建具有计时器的html5应用程序。在10秒的时间结束后，它将显示一个按钮。假设，一旦用户点击按钮，将显示一个弹出窗口，它将计算变量中的按钮单击并重置计时器。该过程将再次循环。问题是，在用户点击按钮后，在计时器第二次倒计时后，按钮没有显示。

这是Js代码：

<!-- Timer countdown -->
   <script type=text/javascript>
    var clicks = 0;
    function showTimer(selector, seconds) 
    {
        var startTime = Date.now();
        var interval;


        function showRemaining() 
        {
            var delta = Date.now() - startTime;     // milliseconds
            var deltaSeconds = delta / (1000);
                if (deltaSeconds < seconds) {
                        // display minutes remaining
                    $(selector).text(Math.round(seconds - deltaSeconds));
                        } else {
                            $(selector).text(0);
                    clearInterval(interval);
                                }
        }

    interval = setInterval(showRemaining, 1000);
    showRemaining();
    }


    $(document).ready(function()
        {
            showTimer("#countdown", 10);

        });

    setTimeout(function() 
    {
    $("#proceed").show();
    }, 10000);     

    //when click button
    function onClick() {

        clicks += 1;
        document.getElementById("proceed").style.visibility="hidden";
        alert("Getting the message");
        document.getElementById("clicks").innerHTML = clicks;

        showTimer("#countdown", 10);

    };

    </script>

这是HTML：

<h1>Test</h1>
    <br>
    <p ><span id="countdown"></span><br>
   Timer Here<br>
    <button type="button" id="proceed" onclick="onClick()">Click</button><br>
        <a id="clicks">0</a></p>

Answer 1

你忘记再次显示你的按钮，就像你做的那样，它会隐藏起来。删除setTimeout，因为您知道计时器的结束，也可以重复它。

var clicks = 0;
var interval = -1;
function showTimer(selector, seconds) 
{
    var startTime = Date.now();
    
    function showRemaining() 
    {
        var delta = Date.now() - startTime;     // milliseconds
        var deltaSeconds = delta / (1000);
        if (deltaSeconds < seconds) {
            // display minutes remaining
            $(selector).text(Math.round(seconds - deltaSeconds));
        } else {
            $(selector).text(0);
            clearInterval(interval);
            $("#proceed").show(); // Look at here
        }
    }
    if( interval > -1 ) clearInterval(interval);
    interval = setInterval(showRemaining, 1000);
    showRemaining(); 
}

$(function() {
    showTimer("#countdown", 10);
});

//when click button
function onClick() {

    $("#proceed").hide();
    alert("Getting the message");
    $("#clicks").text(++clicks);

    showTimer("#countdown", 10);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Test</h1>
<br>
<p >
  <span id="countdown"></span><br>
  Timer Here<br>
  <button type="button" id="proceed" onclick="onClick()">Click</button><br>
  <a id="clicks">0</a>
</p>

Answer 2

包含jquery文件链接，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js" type="text/javascript"></script>

重置后JavaScript倒计时器不显示按钮

2 个答案: