Question

我有一个工作两分钟的计时器。最初它显示时间为

2:00

当我点击开始时，时间开始减少。它工作正常，但我想要两件我无法实现的事情

1）定时器完成后，即到达0:00，它应该回到初始值2:00 2）我想确保这个时间应该与服务器时间完全同步。

这是我的代码。

<script>
$(document).ready(function () {
    $("#startClock").click(function () {
        $("#startClock").fadeOut().delay(120000).fadeIn();
        $("#submitamt").fadeIn().delay(120000).fadeOut();
        $("#walkaway").fadeIn().delay(120000).fadeOut();
    });
});
</script>



  <span id="count">2:00</span> 
  <button type="submit" name="submit" id="startClock" value="Submit">Start</button>
  <button type="submit" name="submit" id="submitamt" value="Submit">Submit</button>
  <button type="submit" name="submit" id="walkaway" value="Submit" style="display:none" >Walk Away</button>

任何人都可以告诉我该怎么做

Answer 1

你能试试吗

    $(document).ready(function () {
        $("#startClock").click(function () {
            setInterval(function () {
            $("#startClock").fadeOut().delay(120000).fadeIn();
            $("#submitamt").fadeIn().delay(120000).fadeOut();
            $("#walkaway").fadeIn().delay(120000).fadeOut();

            },120000);
        });
    });

Answer 2

$(document).ready(function() {

  var count = $("#count");
  var interval = 0;
  var t = void 0;
  var d = new Date(1434094898542 + 22000).toString().slice(20, -15);
  count.text(d);
  $.fx.interval = 0;
  $("#startClock").click(function() {
    count.animate({
      color: 1
    }, {
      easing: "linear",
      duration: 120000,
      start: function(now, fx) {
        t = (1434094898542 + 22000);
        interval = setInterval(function() {
          t = t - 1000;
          count.text(new Date(t).toString().slice(20, -15))
        }, 1000)
      },
      complete: function() {
        clearInterval(interval);
        count.text(d)
      }
    })
    $("#startClock").fadeOut().delay(120000).fadeIn();
    $("#submitamt").fadeIn().delay(120000).fadeOut();
    $("#walkaway").fadeIn().delay(120000).fadeOut();
  });
  
});

#submitamt, #walkaway {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre></pre>
<span id="count">2:00</span> 
<button type="submit" name="submit" id="startClock" value="Submit">Start</button>
<button type="submit" name="submit" id="submitamt" value="Submit">Submit</button>
<button type="submit" name="submit" id="walkaway" value="Submit" style="display:none">Walk Away</button>

Answer 3

此功能将为您提供第一个问题：

   function countdown() {
        seconds = document.getElementById('count').innerHTML;
        seconds = parseInt(seconds, 10); 
        //this is to show a message on the last second of the timer            
        if (seconds == 1) {
            temp = document.getElementById('count');
            temp.innerHTML = "Last second!!!";
            return;
        }
        seconds--;
        temp = document.getElementById('count');
        temp.innerHTML = seconds;
        timeoutMyOswego = setTimeout(count, 1000);
    }

$(document).ready(function () {
    $("#startClock").click(function () {
       countdown(); 
       setTimeout(function(){        
            $("#startClock").fadeOut().delay(120000).fadeIn();
            $("#submitamt").fadeIn().delay(120000).fadeOut();
            $("#walkaway").fadeIn().delay(120000).fadeOut();
            $('#count').html('2:00');
        },120000);
    });
});

设置倒数计时器

3 个答案: