The script presented in this page is a JavaScript Countdown Timer that uses for the starting time data added in a form fields.
The button that starts the Countdown Timer is disabled after the user adds data for minutes /seconds in form fields, and clicks the button.
When the Countdown Timer reaches to 0, the Start button is enabled; also, you can add in the script to call a JavaScript function when minutes and seconds reach to 0 (for explanations about the code, see the comments in script).

• There is a new version of this script to this page: https://coursesweb.net/javascript/countdown-timer-starting-time-added-form

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

<form>
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" onclick="countdownTimer()"/>
</form>
Countdown Timer: &nbsp; <span id="showmns">00</span>:<span id="showscs">00</span>
<script type="text/javascript"><!--
    /* Function to display a Countdown timer with starting time from a form */
// sets variables for minutes and seconds
var ctmnts = 0;
var ctsecs = 0;
var startchr = 0;       // used to control when to read data from form

function countdownTimer() {
  // https://coursesweb.net/javascript/
  // if $startchr is 0, and form fields exists, gets data for minutes and seconds, and sets $startchr to 1
  if(startchr == 0 && document.getElementById('mns') && document.getElementById('scs')) {
    // makes sure the script uses integer numbers
    ctmnts = parseInt(document.getElementById('mns').value) + 0;
    ctsecs = parseInt(document.getElementById('scs').value) * 1;

    // 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
    document.getElementById('mns').value = ctmnts;
    document.getElementById('scs').value = ctsecs;
    startchr = 1;
    document.getElementById('btnct').setAttribute('disabled', 'disabled');     // disable the button
  }

  // if minutes and seconds are 0, sets $startchr to 0, and return false
  if(ctmnts==0 && ctsecs==0) {
    startchr = 0;
    document.getElementById('btnct').removeAttribute('disabled');     // remove "disabled" to enable the button

    /* HERE YOU CAN ADD TO EXECUTE A JavaScript FUNCTION WHEN COUNTDOWN TIMER REACH TO 0 */

    return false;
  }
  else {
    // 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;
      }
    }
  }

  // display the time in page, and auto-calls this function after 1 seccond
  document.getElementById('showmns').innerHTML = ctmnts;
  document.getElementById('showscs').innerHTML = ctsecs;
  setTimeout('countdownTimer()', 1000);
}
//-->
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Countdown Timer with starting time added into a form

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (21106)
  2. Get the Height and Width of web Page and browser Window (2113)
  3. Register and show online users and visitors (33649)
  4. Fotorama Image Gallery (4133)
  5. Move image from an element /tag to another (2011)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (213)
  3. Node.js Move and Copy file (173)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (155)