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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Countdown Timer with starting time added into a form

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (36592)
  2. Display image file in Canvas, Check its type and size before Upload (1686)
  3. Simple Admin Login PHP Script (2264)
  4. Contact page - CoursesWeb (7905)
  5. Tabs effect with CSS (8619)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1825)
  2. Contact page - CoursesWeb (1754)
  3. Tabs effect with CSS (1747)
  4. Insert, Select and Update NULL value in MySQL (1030)
  5. PHP getElementById and getElementsByTagName (707)