CODEWITHSUNDEEP
javascriptjquery
user4558489
user4558489

Reputation:

set the time of countdown timer

I have a timer that works for two minutes. Initially it display time as

2:00

when i click on start, the time starts decreasing.It is working fine, but i want 2 things that i am not able to achieve

1) After the timer is finished i.e reached to 0:00 it should move back to initial value of 2:00 2)i want to ensure that this time should sync 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 please tell me how to do so

Upvotes: 4

Views: 197

Answers (3)

Lelio Faieta
Lelio Faieta

Reputation: 6684

This function will do for you for what your first question:

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

Upvotes: 1

guest271314
guest271314

Reputation: 1

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

Upvotes: 2

ThePravinDeshmukh
ThePravinDeshmukh

Reputation: 1923

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

Upvotes: 4

Related Questions