Javascript Course

The script presented in this page is a JavaScript Countdown Timer that uses for starting time the data added in form fields.
The button that starts the Countdown Timer it is changed in Pause /Resume after the user adds data for minutes /seconds in form fields, and clicks on START.
When the Countdown Timer reaches to 0, the script calls a function (named endCT()) where you can add your JavaScript instructions to be executed when minutes and seconds reach to 0 (for explanations about the code, see the comments in script).
- The RESTART button (it is optional, you can remove it) restarts the countdown timer from the values added in form fields.
- The END button (it is optional, you can remove it) sets the form data, minutes and secconds back to 0, and calls the endCT() function.

Demo (Add numeric values into the fields for minutes and seconds, then click START):
Minutes:     Seconds:
Countdown Timer:   00:00

Code for JavaScript Countdown Timer

- Click on the code to select it:
<form action="#" method="post">
Minutes: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" /> &nbsp; &nbsp; Seconds: <input type="text" id="scs" name="scs" value="0" size="2" maxlength="2" /><br/>
<input type="button" id="btnct" value="START" /> 
<input type="button" id="btnct_res" value="RESTART" /> 
<input type="button" id="btnct_end" value="END" />
</form>
Countdown Timer: &nbsp; <span id="showmns">00</span>:<span id="showscs">00</span>
<script>
// <![CDATA[
function CountdownTimer(obnm){
 // https://coursesweb.net/javascript/
  var endct =0;  // it is set to 1 when script starts
  var ctmnts =0;  // minutes
  var ctsecs =0;  // seconds
  var startchr =0;  // used to control when to read data from form, and script finished
  var ctpause =-1;  //if -1, pause the script

  //get html elms.
  var el_showmns = document.getElementById('showmns');
  var el_showscs = document.getElementById('showscs');
  var el_mns = document.getElementById('mns');
  var el_scs = document.getElementById('scs');
  var el_btnct = document.getElementById('btnct');
  var el_btnct_res = document.getElementById('btnct_res');
  var el_btnct_end = document.getElementById('btnct_end');

  //to start/pause/resume Countdown Timer
  function startPauseCT(){
    if(parseInt(el_mns.value) >0 || parseInt(el_scs.value)>0 || endct ==1){
      ctpause *=-1;
      if(ctpause ==1){ //Start and set next click as Pause
        el_btnct.value ='PAUSE';
        window[obnm].countdownTimer();
      }
      else el_btnct.value ='RESUME';
    }
  }

  // HERE YOU CAN ADD TO EXECUTE JavaScript instructions WHEN COUNTDOWN TIMER REACHES TO 0
  function endCT(){
    // HERE ADD YOUR CODE

    return false;
  }

  this.countdownTimer = function(){
    // if $startchr is 0, and form fields exists, gets data for minutes and seconds, and sets $startchr to 1
    if(startchr == 0 && el_mns && el_scs) {
      // makes sure the script uses integer numbers
      ctmnts = parseInt(el_mns.value);
      ctsecs = parseInt(el_scs.value);

      // if data not a number, sets the value to 0
      if(isNaN(ctmnts)) ctmnts = 0;
      if(isNaN(ctsecs)) ctsecs = 0;

      // rewrite data in form fields to be sure that the fields for minutes and seconds contain integer number
      el_mns.value = ctmnts;
      el_scs.value = ctsecs;
      startchr = 1;
    }

    if(ctmnts >0 || ctsecs >0) endct =1;  //to can call endCT() at the ending

    // if minutes and seconds are 0, call endCT()
    if(ctmnts==0 && ctsecs==0 && endct ==1){
      startchr =0;
      ctpause =-1;
      endct =0;
      el_btnct.value ='START';
      endCT();
    }
    else if(startchr ==1 && ctpause ==1){
      // decrease seconds, and decrease minutes if seconds reach to 0
      ctsecs--;
      if(ctsecs < 0){
        if(ctmnts > 0) {
          ctsecs = 59;
          ctmnts--;
        }
        else {
          ctsecs = 0;
          ctmnts = 0;
        }
      }
      setTimeout(obnm +'.countdownTimer()', 1000); //auto-calls this function after 1 seccond
    }

    // display the time in page
    el_showmns.innerHTML = ctmnts;
    el_showscs.innerHTML = ctsecs;
  }

  //set event to button that starts the Countdown Timer
  if(el_btnct) el_btnct.addEventListener('click', startPauseCT);

  //restart Countdown Timer from the initial values
  if(el_btnct_res) el_btnct_res.addEventListener('click', function(){ startchr =0; if(ctpause ==-1) startPauseCT(); });

  //ending Countdown Timer, sets 0 form data
  if(el_btnct_end) el_btnct_end.addEventListener('click', function(){ el_mns.value =0; el_scs.value =0; startchr =0; startPauseCT(); });
}

//set object of CountdownTimer class
var obCT = new CountdownTimer('obCT');
// ]]>
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Countdown Timer with starting time added into a form - V.2

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (144088)
  2. Split number - Get each character from number (961)
  3. Disable button and Enable it after specified time (17615)
  4. Laravel Basic Architecture (1330)
  5. Select in MySQL, Output results in HTML Table (19579)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (536)
  2. CSS cursor property - Custom Cursors (74)
  3. Read Excel file data in PHP - PhpExcelReader (50)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (46)
  5. PHP Unzipper - Extract Zip, Rar Archives (46)