Question

我有一段代码让我的计数器工作2分钟。 2分钟结束后，会出现一个警告框，通知完成时间。

我想要做的是当出现警告框并且用户点击确定并返回到屏幕时，我想让2个按钮消失，只剩下一个按钮。到这里我已经能够做到但是这一部分（也通过评论b / w代码表示）应该只停留20秒，之后屏幕应该自动重置。

我正在使用的代码是

    var ticker = function() 
        {
            counter--;
            var t = (counter / 60) | 0; // it is round off
            digits.eq(0).text(t);
            t = ((counter % 60) / 10) | 0;
            digits.eq(2).text(t);
            t = (counter % 60) % 10;
            digits.eq(3).text(t);
            if (!counter) 
                {
                    clearInterval(timer);
                    alert('Sorry, time is out.');

/***3 lines given below should stay for 20 sec and after that the screen should get reset***/ 

                        $("#count").hide(); 
                        $("#walkaway").show(); 
                        $("#submitamt").hide();


                }
        };

Answer 1

您应该使用setTimeout代替setInterval。这有用吗？

＆＃13;

$(function () {
  setTimeout(function () {
    alert("Alert came after 2 mins.");
    $(".after-2mins").show();
    setTimeout(function () {
      location.href = location.href;
    }, 2000);
  }, 5000);
});

＆＃13;

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
.hidden {display: none;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p>Wait for 2 mins. 5 seconds in this demo.</p>
<div class="after-2mins hidden">
  <p>2 mins over. Displaying 2 buttons. After 20 seconds, everything will reload. It is 2 seconds in this demo.</p>
  <input type="button" value="Button1" />
  <input type="button" value="Button2" />
</div>

＆＃13;

Answer 2

在显示按钮后添加超时功能，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <div>Centered column</div>
  <img src="http://lorempixel.com/300/100/nature/1" class="margin" />
</div>
<div class='container'>
  <div>Centered column</div>
  <img src="http://lorempixel.com/300/100/nature/2" class="translate" />
</div>

显示按钮几秒钟，然后重置屏幕

2 个答案: