Linux Format forums

Re: [SOLVED] A javascript timer

jonrob — Thu Jun 30, 2011 6:11 pm

Author: jonrob

Posted: Thu Jun 30, 2011 6: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:

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]

Re: [SOLVED] A javascript timer

jonrob — Thu Jun 30, 2011 5:23 pm

Author: jonrob

Posted: Thu Jun 30, 2011 5:23 pm

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]

Re: [SOLVED] A javascript timer

jonrob — Thu Jun 30, 2011 4:32 pm

Author: jonrob

Posted: Thu Jun 30, 2011 4: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!

[SOLVED] A javascript timer

jonrob — Thu Jun 30, 2011 4:30 pm

Author: jonrob

Posted: Thu Jun 30, 2011 4: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:

<!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]