Log in

View Full Version : java script countdown clock calculator


DestinysEnd
06-30-2012, 09:43 PM
so im working on a few projects rite now, my main issue I have come across is the count down clock im trying to do, im not to well spoken when it comes to javascript or any coding language above css, but im learning,
I did manage to find a small part of what im looking for as far as counting down will go. I have tried adding an additional varible, and if statements but I cannot seem to get the minutes on my clock.
im initally wanting it to show like 00:00:00
I know how to display it in its own pop up and all,
but I dont know how do to some of the harder parts,

the full way I need it done is, from top to bottom left to right

first line: text box that starts out displaying 00:00:00 and are able to edit it for your own time and a start/stop button next to it

second line: 2 buttons, 5 min and 15 min
third line: 2 buttons 30 min and 60 min

im trying to get the buttons to output their value to the text box when they are clicked and to start counting down when you click start

when it reaches 0 I have an alert box that will pop up but dont know how to put it in javascript,
and a timer to count how long the 1st alert box was up and to be displayed in a second alert box to show how long they were over

I know it can be done

but all I have is this so far

I dont mind doing the coding myself, if someone would show me or explain what needs to be done

========================================================




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>simple countdown</title>

<style type="text/css">
form {
text-align:center;
}
input {
font-family:monospace;
font-size:18px;
font-weight:bold;
text-align:center;
background-color:#f0f0f0;
}
</style>

<script type="text/javascript">

/*** these values are editable ***/

var milisec=0;
var seconds=0;

/********************************/

var zero=null;
var temp=seconds+':'+milisec+'0';

function display(){
if(seconds<10){
zero='0';
}
document.forms[0][0].value=zero+seconds+':'+milisec+'0';
if(milisec<=0){
milisec=10;
seconds--;
}
if(seconds<0){

return;
}
milisec--
setTimeout(function(){display()},100)
}
window.addEventListener?
window.addEventListener('load',display,false):
window.attachEvent('onload',display);
</script>

</head>
<body>

<form action="#">
<div>
<input type="text" size="8">
</div>
</form>

</body>
</html>
bernie1227
07-01-2012, 01:27 AM
Here's some code that should do basically the exact thing you asked for:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Timer</title>
<script type="text/javascript">
<!--

var timeLeft = 0;
var begin

function startTimer() {
//check for null input hours, minutes, seconds
if(document.getElementById("txtHours").value == ""){
document.getElementById("txtHours").value = "0";
}

if(document.getElementById("txtMinutes").value == ""){
document.getElementById("txtMinutes").value = "0";
}

if(document.getElementById("txtSeconds").value == ""){
document.getElementById("txtSeconds").value = "0";
}

//get input hours, minutes, seconds
var hours = parseInt(document.getElementById("txtHours").value);
var minutes = parseInt(document.getElementById("txtMinutes").value);
var seconds = parseInt(document.getElementById("txtSeconds").value);

//calculate time left in seconds
timeLeft = (hours * 3600) + (minutes * 60) + seconds;

//start count down timer
begin=setInterval("countDown()",1000);
}

function countDown() {
var hoursLeft = 0;
var minutesLeft = 0;
var secondsLeft = 0;
var remainder = 0;

timeLeft = timeLeft-1;

if(timeLeft >= 0){
//break down time left into hours, minutes, seconds
hoursLeft = Math.floor(timeLeft/3600);
remainder = timeLeft%3600;

minutesLeft = Math.floor(remainder/60);
remainder * = remainder%60;

secondsLeft = remainder;
document.getElementById('cellHours').innerHTML = hoursLeft;
document.getElementById('cellMinutes').innerHTML = minutesLeft;
document.getElementById('cellSeconds').innerHTML = secondsLeft;
} else {
clearInterval(begin);
}
}

//-->
</script>

</head>
<body>
<form>
<!-- Table to input total time -->
<table>
<caption style="font-weight: bold">Total Time</caption>
<th>Hours</th>
<th>Minutes</th>
<th>Seconds</th>
<tr>
<td><input type="text" id="txtHours" value="0" size="5" /></td>
<td><input type="text" id="txtMinutes" value="0" size="5" /></td>
<td><input type="text" id="txtSeconds" value="0" size="5" /></td>
</tr>
</table>
<!-- Table to output time left -->
<table name="tblTimer" id="tblTimer" width="500px" style="margin: 70 0 0 0" border="1">
<caption style="font-weight: bold">Time Left</caption>
<th>Hours Left</th>
<th>Minutes Left</th>
<th>Seconds Left</th>
<tr>
<td id="cellHours" align="center">0</td>
<td id="cellMinutes" align="center">0</td>
<td id="cellSeconds" align="center">0</td>
</tr>
</table>
<!-- Display control buttons -->
<table style="margin: 50 0 0 0">
<tr>
<td>
<input type="button" value="Start Timer"
onclick="startTimer();" />
</td>
<td>
<input type="button" value="Stop Timer"
onclick="clearInterval(begin);" />
</td>
</tr>
</table>
</form>
</body>
</html>

Bernie