Blorner

Thursday, August 19, 2010

Countdown Clock

This script is an example of countdown clock. You can set seconds and start countdown.

<html>

<head>
<title>Countdown Clock</title>

<script type="text/javascript">
function convert(){
var seconds = document.getElementById("inputted_seconds").value;

if(isNaN(seconds)){
alert("Please enter a valid number.");
}else{
document.getElementById("inputted_seconds").setAttribute("disabled","disabled");
document.getElementById("start").setAttribute("disabled","disabled");

var days = seconds/60/60/24;
days = parseInt(days.toString());

seconds = seconds - days*24*60*60;

var hours = seconds/60/60;
hours = parseInt(hours.toString());

seconds = seconds - hours*60*60;

var minutes = seconds/60;
minutes = parseInt(minutes.toString());

seconds = seconds - minutes*60;

document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";


t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",0);
}
}

function start_countdown(days,hours,minutes,seconds){
if(seconds==-1){
minutes--;
seconds = 59;
}
if(minutes==-1){
hours--;
minutes = 59;

}
if(hours==-1){
if(days>0){
days--;
hours = 23;
}
}

document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";

if(days==0 && hours==0 && minutes==0 && seconds==0){
alert("Countdown is finished.");
document.getElementById("inputted_seconds").removeAttribute("disabled");
document.getElementById("start").removeAttribute("disabled");
document.getElementById("countdown_clock").innerHTML = "Countdown is finished.";
}else{
seconds--;
t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",1000);
}
}
</script>
</head>

<body>

<label for="inputted_seconds">Input Seconds</label> <input type="text" id="inputted_seconds" /> <input type="button" id="start" value="Start Countdown" onclick="convert();" />

<div id="countdown_clock"></div>

</body>

</html>

No comments:

Post a Comment

Art Works Expo