Linux Format forums Forum Index Linux Format forums
Help, discussion, magazine feedback and more
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

[SOLVED] A javascript timer

 
Post new topic   Reply to topic    Linux Format forums Forum Index -> Programming
View previous topic :: View next topic  
Author Message
jonrob
Site admin


Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43

PostPosted: Thu Jun 30, 2011 4:30 pm    Post subject: [SOLVED] A javascript timer Reply with quote

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 Smile

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
View user's profile Send private message
jonrob
Site admin


Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43

PostPosted: Thu Jun 30, 2011 4:32 pm    Post subject: Reply with quote

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
View user's profile Send private message
jonrob
Site admin


Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43

PostPosted: Thu Jun 30, 2011 5:23 pm    Post subject: Reply with quote

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
View user's profile Send private message
jonrob
Site admin


Joined: Thu Jun 30, 2011 4:24 pm
Posts: 43

PostPosted: Thu Jun 30, 2011 6:11 pm    Post subject: Reply with quote

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 user's profile Send private message
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    Linux Format forums Forum Index -> Programming All times are GMT
Page 1 of 1

 
Jump to:  
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
Linux Format forums topic RSS feed 


Powered by phpBB © 2001, 2005 phpBB Group


Copyright 2011 Future Publishing, all rights reserved.


Web hosting by UKFast