PDA

View Full Version : help with timer

Becair
10-05-2009, 11:38 PM
Hi i am trying to add a timer to a web page a simple icon that says click to begin and then it starts counting from 0 - 5 mins or so i am having trouble getting it to work i have found many countdown timers but they go in the other direction i just want one that goes from 0 to 5 mins any links codes will be greatly appreciated :D ty
soakdigital
10-06-2009, 05:10 AM
Try this:

<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>count up</title>
<script type="text/javascript">
var interval;
var minutes = 0;
var seconds = 0;
var limit = 5; // limit in minutes
window.onload = function() {
countdown('countdown');
}

function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 60) {
if(minutes == limit - 1) {
el.innerHTML = "countdown's over!";
clearInterval(interval);
return;
} else {
minutes++;
seconds = 0;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text;
seconds++;
}, 1000);
}
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>

I haven't tested it, so apologies if this doesn't work first time. Otherwise, the client-side scripting forum (http://www.htmlforums.com/f-client-side-scripting-6.html/) would be a better place to look
Becair
10-06-2009, 07:03 AM
well thats a start ty all i need now is just a button to start it (so its not automatic)
ty again
soakdigital
10-06-2009, 07:33 AM
Ah ok, how about:

<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>count up</title>
<script type="text/javascript">
var interval;
var minutes = 0;
var seconds = 1;
var limit = 5; // limit in minutes
window.onload = function() {
var trigger = document.getElementById('trigger');
trigger.onclick = function () {
countdown('countdown');
return false;
}
}

function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 60) {
if(minutes == limit - 1) {
el.innerHTML = "countdown's over!";
clearInterval(interval);
return;
} else {
minutes++;
seconds = 0;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text;
seconds++;
}, 1000);
}
</script>
</head>
<body>
<a href="#none" id="trigger">start counter</a>
<div id="countdown"></div>
</body>
</html>
Becair
10-08-2009, 02:39 AM
Perfect this is Perfect Thank you so much