Timer countdown with minutes and seconds


/ Published in: JavaScript
Save to your folder(s)

Timer countdown with minutes and seconds


Copy this code and paste it in your HTML
  1. $(document).ready(function(){
  2.  
  3. var fragmentTime;
  4. jQuery('.timeout_message_show').hide();
  5. var minutes = jQuery('span.minute').text();
  6. var seconds = jQuery('span.second').text();
  7. minutes = parseInt(minutes);
  8. seconds = parseInt(seconds);
  9. if (isNaN(minutes)) {
  10. minutes = 00;
  11. }
  12. if (isNaN(seconds)) {
  13. seconds = 00;
  14. }
  15. if (minutes == 60) {
  16. minutes = 59;
  17. }
  18. if (seconds == 60) {
  19. seconds = 59;
  20. }
  21. fragmentTime = (60 * minutes) + (seconds);
  22. displayMinute = document.querySelector('span.minute');
  23. displaySecond = document.querySelector('span.second');
  24. startTimer(fragmentTime, displayMinute, displaySecond);
  25. });
  26.  
  27. function startTimer(duration, displayMinute, displaySecond) {
  28. var timer = duration,
  29. displayMinute, displaySecond;
  30. var timeIntervalID = setInterval(function () {
  31. minutes = parseInt(timer / 60, 10);
  32. seconds = parseInt(timer % 60, 10);
  33. minutes = minutes < 10 ? "0" + minutes : minutes;
  34. seconds = seconds < 10 ? "0" + seconds : seconds;
  35. displayMinute.textContent = minutes;
  36. displaySecond.textContent = seconds;
  37. if (--timer < 0) {
  38. timer = 0;
  39. if (timer == 0) {
  40. clearInterval(timeIntervalID);
  41. //alert(jQuery('.timeout_message_show').text());
  42. }
  43. }
  44. }, 1000);
  45. }
  46.  
  47.  
  48. HTML
  49.  
  50. <div class="timer-container" id="#run-the-timer">
  51. <span class="minute">02</span>:<span class="second">00</span> <span>seconds</span>
  52. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.