[SOLVED] A javascript timer

Code junkies hangout here

Moderators: ChrisThornett, LXF moderators

[SOLVED] A javascript timer

Postby jonrob » Thu Jun 30, 2011 3:30 pm

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: Select all
<!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 5:29 pm, edited 1 time in total.
jonrob
Site admin
 
Posts: 43
Joined: Thu Jun 30, 2011 3:24 pm

Postby jonrob » Thu Jun 30, 2011 3:32 pm

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!
jonrob
Site admin
 
Posts: 43
Joined: Thu Jun 30, 2011 3:24 pm

Postby jonrob » Thu Jun 30, 2011 4:23 pm

Tidied up the code a bit, might be easier to read...

Code: Select all
<!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]
jonrob
Site admin
 
Posts: 43
Joined: Thu Jun 30, 2011 3:24 pm

Postby jonrob » Thu Jun 30, 2011 5:11 pm

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: Select all
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]
jonrob
Site admin
 
Posts: 43
Joined: Thu Jun 30, 2011 3:24 pm


Return to Programming

Who is online

Users browsing this forum: No registered users and 0 guests

cron