設置倒數計時器的時間

Question

我有一個計時器，工作兩分鐘。最初，它的顯示時間

2:00 

當我開始點擊，時間開始decreasing.It工作正常，但我想兩件事情，我不能夠實現

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); 
    }); 
});