Countdown Timer or JavaScript replacing HTML

Greenhorn

Posts: 5

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm working on a school assignment which asks us to create a countdown timer that when the user clicks a button a countdown begins. I've got a button that when clicked starts the countdown and in html what looks like the countdown clock. The problem is that when the countdown button is clicked the screen displays both the html clock and the javascript countdown. My question is: "is there a way to replace the html code with the javascript so that once the countdown begins only one timer is displayed?" I appreciate any time and assistance.

window.setTimeout("Tick()", 1000);
var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time) {
    Timer = document.getElementById(TimerID);
    TotalSeconds = Time;
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function Tick() {
    if (TotalSeconds <= 0) {
        alert("Time's up!")
        return;
    }
	TotalSeconds -= 1;
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    var Seconds = TotalSeconds;
    var Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;
    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);
    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);
    var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
    Timer.innerHTML = TimeStr;
}

function LeadingZero(Time) {
    return (Time < 10) ? "0" + Time : + Time;
}

function Click(){
	alert("hello")
}

</script>
</head>

<body>

<h1>Countdown Clock</h1>
<p>00:00:30</p>

</body>

WARNING! Do not activate jet boots indoors or you will see a tiny ad:

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders