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).
Demo (Add numeric values into the fields for minutes and seconds, then click START):
Countdown Timer: 00:00
Code for JavaScript Countdown Timer
<form>
Minutes: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" /> 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: <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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net