SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help debug page timer code

    I need a Javascript timer that starts at 0:00:00 and counts up. I started with a clock script but I can't figure out how to reset it so it starts counting from 0:00:00. This is what I have:


    Code:
    function start_clock () {
      var d=new Date()
      var h= d.getHours()
      var m= d.getMinutes() + ""
      var s= d.getSeconds() + ""
    
      if (m.length==1) { m="0" + m } //  2 decimal spaces.
      if (s.length==1) { s="0" + m } // 2 decimal spaces.
      myTimer.innerHTML=h + ":" + m + ":" + s
    }
    That starts the clock at whatever time now is and dynamically keeps on counting up. I trided modifying it like this:

    Code:
    function start_clock () {
      var d=new Date()
      d.setHours(0,0,0)  // <--------------
      var h= d.getHours()
      var m= d.getMinutes() + ""
      var s= d.getSeconds() + ""
    
      if (m.length==1) { m="0" + m } //  2 decimal spaces.
      if (s.length==1) { s="0" + m } // 2 decimal spaces.
      myTimer.innerHTML=h + ":" + m + ":" + s
    }
    So now it prints the 0:00:00 but it doesn't count anymore.

    Help pretty please?

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I better include a working version of the code

    <html>
    <head>

    <script type="javascript">

    function start_int() {
    intval=window.setInterval("start_clock"()",1000)
    }

    function start_clock () {
    var d=new Date()
    var h= d.getHours()
    var m= d.getMinutes() + ""
    var s= d.getSeconds() + ""

    if (m.length==1) { m="0" + m } // 2 decimal spaces.
    if (s.length==1) { s="0" + m } // 2 decimal spaces.
    myTimer.innerHTML=h + ":" + m + ":" + s
    }

    </script>

    </head>
    <body>
    <span id=myTimer">Interval Stopped <input type="button" value="Start" onClick="start_int()"></span>

    </body>
    </html>
    So the thing is, shouldn't adding d.setHours(0,0,0) right under var d=new Date() set the clock to 0:00:00? Without it, time is set to whatever time is right now and the clock works. With it, time is set to 0:00:00 but the clock doesn't count the time.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know what I'm doing in the javascript forum but your logic seems floored to me.

    If you set the date to zero each time through the loop then you will get zero each time you run through because that's what you are setting it to.

    It seems to me that first time through you want to record the time and save a copy then on subsequent visits you want to compare the current time with the time you saved to find the time elapsed.

    Something like this but needs an expert to tidy it up as my skills are very basic in JS.

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    var firstPass = 0;
    function start_int() {
    intval=window.setInterval("start_clock()",1000)
    }
    function start_clock () {
        var myTimer = document.getElementById('myTimer');
        if (firstPass == 0) {
        firstPass = 1;
        then = new Date();
        } 
        now = new Date();
        var d = now.getTime() - then.getTime();
        var d =  Math.round(d/1000);
        var timeDisplay = findtime(d);
        myTimer.innerHTML = timeDisplay;
    }
    function findtime(theSeconds) {
        var hr = Math.floor(theSeconds / 3600);
        var mins = Math.floor((theSeconds - (hr * 3600))/60);
        theSeconds -= ((hr * 3600) + (mins * 60));
        theSeconds += ''; mins += '';
        while (mins.length < 2) {mins = '0' + mins;}
        while (theSeconds.length < 2) {theSeconds = '0' + theSeconds;}
        while (hr.length < 2) {hr = '0' + hr;}
        return hr + ':'+ mins + ':' + theSeconds;
    }
    
    </script>
    </head>
    <body>
    <div id="myTimer">Interval Stopped
        <input type="button" value="Start" onClick="start_int()">
    </div>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually Paul that works brilliantly

    One more thing; is there an easy way to seed it so it starts at a different time? Say, with 330 seconds on the clock, which would be 5 minutes?

    I'm writing a small application to keep track of time worked. The funny thing is that I don't need the JavaScript to pass anything to my PHP or the database, just to display the clocks. I'm quite good with PHP and MySql but I never managed to get past a rudimentary knowledge of JavaScript

    Basically, the database will keep track of the time worked (in seconds). If somebody hits the pause button, the timer becomes a static display of total time (from the database). If somebody then pushes the 'track time' button, from the database I can feed the JavaScript how much time (in seconds) to start counting from, until the person hits the pause button again. At that point I can calculate the time via PHP based on how many seconds elapsed from hitting start (recorded on the database) to hitting pause (the time now).

    I realize I could pass from the JavaScript to the PHP the amount of seconds, but I rather calculate it separately to stop the users from HTML hacking

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rm-rf View Post

    One more thing; is there an easy way to seed it so it starts at a different time? Say, with 330 seconds on the clock, which would be 5 minutes?
    I would think that you could just tack on your offset here:

    Code:
    var d =  Math.round(d/1000) + 300;
    That should make it start at 5 minutes (with any luck ).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •