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:

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

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()"/>
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() {
  // 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


    return false;
  else {
    // decrease seconds, and decrease minutes if seconds reach to 0
    if(ctsecs < 0) {
      if(ctmnts > 0) {
        ctsecs = 59;
      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);

Daily Test with Code Example

Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em></em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
Indicate the PHP variable that contains data from a form sent with method="post".
if(isset($_POST["field"])) {
  echo $_POST["field"];
Countdown Timer with starting time added into a form

Last accessed pages

  1. JavaScript code and PHP (22407)
  2. Read Excel file data in PHP - PhpExcelReader (63527)
  3. Contact page - CoursesWeb (2152)
  4. Tabs effect with CSS (2864)
  5. Integer and Float value in Select with PDO from string to numeric (5293)

Popular pages this month

  1. Contact page - CoursesWeb (1638)
  2. Tabs effect with CSS (1624)
  3. Insert, Select and Update NULL value in MySQL (822)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)