Set Countdown Timer

Question

I have a timer that runs for two minutes. It initially displays the time as

2:00

when I click on the start, time starts to decrease. It works fine, but I want 2 things that I cannot achieve

1) Upon completion of the timer, which has reached 0:00, it should return to the original value of 2:00 2) I want to make sure that this time must be synchronized exactly with the server time.

here is my code.

<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>

Can anyone tell me how to do this

Answer 1

Can you try this

    $(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>

Run codeHide result

Answer 3

This function will make your first question for you:

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