 |
Linux Format forums
Help, discussion, magazine feedback and more
|
| View previous topic :: View next topic |
| Author |
Message |
jonrob
Site admin
Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43
|
 Posted: Thu Jun 30, 2011 4:30 pm Post subject: [SOLVED] A javascript timer |
 |
|
Hey,
So, in the spirit of Juliet's recent Android tutorials, I thought I'd have a little play around with a bit of Javascript (something I do from time to time, never to much success!) and try creating a timer application written in Javascript.
It kind of works, in so far as it will take the amount of time the user enters and countdown to zero for that amount of time. What I'm struggling with is converting from milliseconds to hours, minutes and seconds. Can't for the life of me figure out what's going wrong here...
If anyone has any ideas, they'd be well received 
| Code: |
<!DOCTYPE html>
<html lang="en">
<head>
<title> Jon's Timer </title>
<script type="text/javascript">
function init() {
var form = document.getElementById('timer_form');
form.elements.start.addEventListener('click', timer, false);
}
function timer() {
var form = document.getElementById('timer_form');
var hours = form.elements.hours.value;
var minutes = form.elements.minutes.value;
var seconds = form.elements.seconds.value;
var now = new Date();
var end = new Date();
end.setTime(now.getTime() + ((Number(hours) * 60 * 60 * 1000) + (Number(minutes) * 60 * 1000) + Number(seconds) * 1000));
function compare(end) {
var now = new Date();
var count = end.getTime() - now.getTime();
if (count > 0) {
var div = document.getElementById('timer');
var hours = Math.round(count/1000/60/60);
count = count - (hours * 60 * 60 * 1000);
var minutes = Math.round(count/1000/60);
count = count - (minutes * 60 * 1000);
var seconds = Math.round(count/1000);
div.innerHTML = count + "<br />" + hours + ':' + minutes + ':' + seconds;
setTimeout(compare, 1000, end);
}
else {
var div = document.getElementById('timer');
div.innerHTML = 'buzz';
}
}
compare(end);
}
</script>
</head>
<body onload="init();">
<div id="timer">
<form id="timer_form">
Hours: <input type="text" size="2" name="hours" />
Minutes: <input type="text" size="2" name="minutes" />
Seconds: <input type="text" size="2" name="seconds" /> <br />
<input type="button" value="Start" name="start" />
</form>
</div>
</body>
</html>
|
[/code]
Last edited by jonrob on Thu Jun 30, 2011 6:29 pm; edited 1 time in total |
|
| Back to top |
|
 |
jonrob
Site admin
Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43
|
| Posted: Thu Jun 30, 2011 4:32 pm Post subject: |
|
|
Oh, I guess it would help if I explained what happens as it stands!
It correctly outputs the hours, minutes seconds the first time, and it will count down the seconds nicely. But when it reaches zero seconds, rather than changing the minutes, it starts going into negative second values! |
|
| Back to top |
|
|
jonrob
Site admin
Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43
|
| Posted: Thu Jun 30, 2011 5:23 pm Post subject: |
|
|
Tidied up the code a bit, might be easier to read...
| Code: |
<!DOCTYPE html>
<html lang="en">
<head>
<title> Jon's Timer </title>
<script type="text/javascript">
function init() {
var form = document.getElementById('timer_form');
form.elements.start.addEventListener('click', timer, false);
}
function printTime(mili) {
var div = document.getElementById('timer');
var hours = Math.round(mili/1000/60/60);
//mili = mili - (hours * 60 * 60 * 1000);
var minutes = Math.round(mili/1000/60);
//mili = mili - (minutes * 60 * 1000);
var seconds = Math.round(mili/1000);
div.innerHTML = hours + ':' + minutes + ':' + seconds;
}
function compare(mili) {
if (mili > 0) {
printTime(mili);
mili = mili - 1000;
setTimeout(compare, 1000, mili);
}
}
function timer() {
var form = document.getElementById('timer_form');
var hours = form.elements.hours.value;
var minutes = form.elements.minutes.value;
var seconds = form.elements.seconds.value;
var mili = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000);
compare(mili);
}
</script>
</head>
<body onload="init();">
<div id="timer">
<form id="timer_form">
Hours: <input type="text" size="2" name="hours" />
Minutes: <input type="text" size="2" name="minutes" />
Seconds: <input type="text" size="2" name="seconds" /> <br />
<input type="button" value="Start" name="start" />
</form>
</div>
</body>
</html>
|
[/code] |
|
| Back to top |
|
|
jonrob
Site admin
Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43
|
| Posted: Thu Jun 30, 2011 6:11 pm Post subject: |
|
|
Solved!
In the updated version of the code, the problem was in the printTime() function. I wasn't converting from miliseconds to hours:minutes:seconds correctly.
The proper way to do this, and I can only think there's a more elegant way of writing it, is this:
| Code: |
var hours = Math.floor(mili / (60 * 60 * 1000));
var minutes = Math.floor((mili % (60 * 60 * 1000)) / (60 * 1000));
var seconds = Math.floor(((mili % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
|
[/code] |
|
| Back to top |
|
|
| View previous topic :: View next topic |
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
