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

【问题标题】：JavaScript countdown timer not display button after reset重置后JavaScript倒计时计时器不显示按钮
【发布时间】：2018-03-05 16:36:14
【问题描述】：

我正在尝试创建具有计时器的 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>

【问题讨论】：

你是否包含了 jquery.js 文件？

标签： javascript timer

【解决方案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>

【讨论】：

【解决方案2】：

包含 jquery 文件链接，

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

【讨论】：

我的工作就像一个魅力。太感谢了。这很有帮助。