i have the following code in timer.php . If i run the file timer.php i get proper output as follows
time left : 02 min 30 sec
and this keeps on decreasing. But if include the file timper.php in other files using <? require 'timer.php' ?> only time left : is shown and actual timer countdown is not shown (in Fire fox). But if i run same thing in ie it is shown correclty.
what is the problem? My timer.php has the flowing code.
<script >
var sec = 00; // set the seconds
var min = 02 // set the minutes
function countDown() {
sec--;
if (sec == -01) {
sec = 59;
min = min - 1;
} else {
min = min;
}
if (sec<=9) { sec = "0" + sec; }
time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
countDown();
});
</script>
time left :
<span id="theTime" ></span>
Can anyone giv me a code for javascript countdown timer (in minutes) that i can copy pase in my project?
Just in case that it's not a typo or "abbreviation": You have to put quotes around the file name.
<?php require 'timer.php' ?>
Otherwise php will look for the constants timer and php and when it doesn't find them it will interpret them as two separate strings and concatenate them because the dot is interpreted as an operator, resulting in two warnings (about the missing constants) and require 'timerphp' (without the dot between timer and php)
If this code JS works for you, you have a problem with window.onload.
<script >
var countDown = function(idEl) {
this.sec = 00; // set the seconds
this.min = 02; // set the minutes
this.el = idEl; // set the minutes
this.SD = null;
this.timer = function(pthis) {
pthis.sec--;
if (pthis.sec == -01) {
pthis.sec = 59;
pthis.min = pthis.min - 1;
} else {
pthis.min = pthis.min; //??
}
if (pthis.sec<=9) { pthis.sec = "0" + pthis.sec; }
var time = (pthis.min<=9 ? "0" + pthis.min : pthis.min) + " min and " + pthis.sec + " sec ";
if (document.getElementById) { document.getElementById(pthis.el).innerHTML = time; }
pthis.SD=window.setTimeout(function(){pthis.timer.apply(pthis, [pthis])}, 1000);
if (pthis.min == '00' && pthis.sec == '00') { pthis.sec = "00"; window.clearTimeout(pthis.SD); }
};
this.timer(this);
}
</script>
time left : <span id="theTime" ></span>
<script>countDown("theTime")</script>
Here's my version of a JS countdown timer (FYI, I tested your version in Firefox and it worked fine for me).
<html>
<head>
<title>Timer</title>
<script type="text/javascript">
var Timer = {
// Main method for counting down
countDown: function (displayID, min, sec, callback) {
// Update timer display
document.getElementById(displayID).innerHTML = (min < 10 ? "0" : "") + min + ":" + (sec < 10 ? "0" : "") + sec;
// If there is time left on the timer, continue counting down
if (sec > 0 || min > 0) {
setTimeout(function () { Timer._countDownCallback(displayID, min, sec, callback); }, 1000);
}
// When time has run out invoke option callback function
else if (typeof callback == "function") {
callback();
}
},
// Internal method for processing remaining time
_countDownCallback: function (displayID, min, sec, callback) {
// Update time left for the timer
sec = (sec > 0 ? sec - 1 : 59);
if (sec == 59) min = (min > 0 ? min - 1 : 59);
// Call main method to update display, etc.
Timer.countDown(displayID, min, sec, callback);
}
};
// Start the timer when the page loads
window.onload = function () {
Timer.countDown("timerDisplay", 2, 30, function () { alert("The time has come!"); });
}
</script>
</head>
<body>
<div>Time left: <span id="timerDisplay"></span></div>
</body>
</html>
You can use this JavaScript Timer class.
Most likely the javascript in timer.php is not running properly because including the file in the other file cause the HTML to break due to some HTML tag mismatch. Or possibly there is another error in the external HTML page that breaks javascript for that. Without any more details its hard to tell as the Javascript code you shown - though I don't really like it and it has many problems - should work as you intended.