Advanced Search

Timer countdown with minutes and seconds

/ Published in: JavaScript
Save to your folder(s)
Timer countdown with minutes and seconds

Expand | Embed | Plain Text

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.