<?php
$s = "20";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>countdown timer</title>
<script type="text/javascript">
var countdowntimer = function() {
this.s = null; // The seconds left in the timer
this.reset = null; // The seconds to reset the timer to
this.el = null; // The element container used to draw the timer
this.timerId = null; // The timerId as provided by setTimeout
return {
/**
* initialize the timer with the number of seconds and the element that
* will be used to draw the timer.
* @param {integer} s The number of seconds in the timer
* @param {HTMLElement} el The element whose contents will be replaced
*/
init : function(s, el) {
countdowntimer.s = s;
countdowntimer.reset = s;
countdowntimer.el = document.getElementById(el);
},
/**
* Draw the timer and then start the countdown
*/
start : function() {
countdowntimer.draw();
if (countdowntimer.s > 0) {
countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
}
},
/**
* If the counter is counting down, stop it
*/
stop : function() {
if(countdowntimer.timerId) {
clearTimeout(countdowntimer.timerId);
}
},
/**
* stop the counter if it's counting down, then reset to the initialized
* value, and redraw the timer.
*/
resettimer : function() {
if(countdowntimer.timerId) {
countdowntimer.stop();
}
countdowntimer.s = countdowntimer.reset;
countdowntimer.draw();
},
/**
* If the timer has reached zero, notify the user. Otherwise, decrement
* it, draw it, and call this method again in 1 second.
*/
step : function() {
if (countdowntimer.s > 0) {
countdowntimer.s--;
countdowntimer.draw();
countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
}
else {
alert("Time's up!");
}
},
/**
* Draw the value of the timer in the container element.
*/
draw : function() {
countdowntimer.el.innerHTML = countdowntimer.s;
}
};
}();
window.onload = function() {
countdowntimer.init(<?=$s;?>,'countdown');
countdowntimer.start();
document.getElementById("stopClock").onclick = function() {
countdowntimer.stop();
};
document.getElementById("startClock").onclick = function() {
countdowntimer.start();
};
document.getElementById("resetClock").onclick = function() {
countdowntimer.resettimer();
};
}
</script>
</head>
<body>
<div id="countdown"></div>
<input type="button" id="stopClock" value="stop timer">
<input type="button" id="startClock" value="start timer">
<input type="button" id="resetClock" value="Reset timer">
</body>
</html>
$s = "20";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>countdown timer</title>
<script type="text/javascript">
var countdowntimer = function() {
this.s = null; // The seconds left in the timer
this.reset = null; // The seconds to reset the timer to
this.el = null; // The element container used to draw the timer
this.timerId = null; // The timerId as provided by setTimeout
return {
/**
* initialize the timer with the number of seconds and the element that
* will be used to draw the timer.
* @param {integer} s The number of seconds in the timer
* @param {HTMLElement} el The element whose contents will be replaced
*/
init : function(s, el) {
countdowntimer.s = s;
countdowntimer.reset = s;
countdowntimer.el = document.getElementById(el);
},
/**
* Draw the timer and then start the countdown
*/
start : function() {
countdowntimer.draw();
if (countdowntimer.s > 0) {
countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
}
},
/**
* If the counter is counting down, stop it
*/
stop : function() {
if(countdowntimer.timerId) {
clearTimeout(countdowntimer.timerId);
}
},
/**
* stop the counter if it's counting down, then reset to the initialized
* value, and redraw the timer.
*/
resettimer : function() {
if(countdowntimer.timerId) {
countdowntimer.stop();
}
countdowntimer.s = countdowntimer.reset;
countdowntimer.draw();
},
/**
* If the timer has reached zero, notify the user. Otherwise, decrement
* it, draw it, and call this method again in 1 second.
*/
step : function() {
if (countdowntimer.s > 0) {
countdowntimer.s--;
countdowntimer.draw();
countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
}
else {
alert("Time's up!");
}
},
/**
* Draw the value of the timer in the container element.
*/
draw : function() {
countdowntimer.el.innerHTML = countdowntimer.s;
}
};
}();
window.onload = function() {
countdowntimer.init(<?=$s;?>,'countdown');
countdowntimer.start();
document.getElementById("stopClock").onclick = function() {
countdowntimer.stop();
};
document.getElementById("startClock").onclick = function() {
countdowntimer.start();
};
document.getElementById("resetClock").onclick = function() {
countdowntimer.resettimer();
};
}
</script>
</head>
<body>
<div id="countdown"></div>
<input type="button" id="stopClock" value="stop timer">
<input type="button" id="startClock" value="start timer">
<input type="button" id="resetClock" value="Reset timer">
</body>
</html>
No comments:
Post a Comment