www.webdeveloper.com
Results 1 to 11 of 11

Thread: Javascript countdown timer HELP!

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    5

    Javascript countdown timer HELP!

    Objective: A countdown timer that countdown to a certain time that is synchronized to server time. This means that does not matter where the client is from all clients will see the same exact count down. The countdown will also implement a button that when ever pressed will reset the countdown to 15 seconds regardless of which client pressed it. Once again all clients will see the same exact 15 seconds countdown.

    Accomplished: So far I'm able to get the countdown to be synchronized to my server time. The timer actually counts to a set time according to the server time and date no matter who is looking at it.

    PROBLEM: I'm unable to get the button to reset the countdown timer to 15 seconds regardless of who clicked it. Every time the same button is click the timer must reset to 15 seconds for everyone looking at it.

    Code:
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript">
    
    var month = '0';       //  '*' for next month, '0' for this month or 1 through 12 for the month 
    var day = '13';        //  Offset for day of month day or + day  
    var hour = 21;         //  0 through 23 for the hours of the day
    var tz = -5;           //  Offset for your timezone in hours from UTC
    var lab = 'tzcd';      //  The id of the page entry where the timezone countdown is to show
    
    function start() {
    	   displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);
    }
    
    window.onload = start;
    
    function setTZCountDown(month,day,hour,tz) {
       var toDate = new Date();
    
       if (month == '*') {
          toDate.setMonth(toDate.getMonth() + 1);
       } else if (month > 0) { 
          if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
    	  toDate.setMonth(month-1);
       }
       
       if (day.substr(0,1) == '+') {
          var day1 = parseInt(day.substr(1));
          toDate.setDate(toDate.getDate()+day1);
       } else {
          toDate.setDate(day);
       }
    
       toDate.setHours(hour);
       toDate.setMinutes(0-(tz*60));
       toDate.setSeconds(0);
       var currenttime = '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL"-->'
       var fromDate = new Date(currenttime);
       fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
       var diffDate = new Date(0);
       diffDate.setMilliseconds(toDate - fromDate);
       return Math.floor(diffDate.valueOf()/1000);
    }
    
    function setTimerto() {
    // I NEED HELP IN HERE. I WANT THIS FUNCTION TO SET
    // THE REAL TIME COUNDOWN TO 15 SECONDS ONCE THE BUTTON
    // IS CLICKED REGARDLESS OF WHAT THE COUNTDOWN WAS AT
    // WHEN THE BUTTON WAS CLICKED. THE COUNT DOWN NEEDS TO
    // BE SYNCHRONIZED WITH SERVER TIME AS WELL.	
    }
    
    function displayTZCountDown(countdown,tzcd) 
    {
       if (countdown < 0) { 
          document.getElementById(tzcd).innerHTML = 'ENDED';
       } else {
          var secs = countdown % 60; 
          if (secs < 10) { 
             secs = '0'+secs;
          } 
          var countdown1 = (countdown - secs) / 60;
          var mins = countdown1 % 60; 
          if (mins < 10) { 
             mins = '0'+mins;
          }
          countdown1 = (countdown1 - mins) / 60;
          var hours = countdown1 % 24;
          var days = (countdown1 - hours) / 24;
          if (hours == 0 && mins == 0 && secs < 15) {
             document.getElementById(tzcd).innerHTML ='<font color="red">' +hours+ ':' +mins+ ':' +secs+ '</font><br /><input type="button" value="CLICK" onclick="setTimerto()">';
          } else {
             document.getElementById(tzcd).innerHTML = hours+ ':' +mins+ ':' +secs+ '<br /><input type="button" value="CLICK" onclick="setTimerto()">';
          }
       setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
    }
    }
    
    </script>
    
    </head>
    
    <body>
    
    <span id="tzcd" style="font-weight: bold; font-size: 30px;"></span>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tannhutha View Post
    ObjectiveThe countdown will also implement a button that when ever pressed will reset the countdown to 15 seconds regardless of which client pressed it. Once again all clients will see the same exact 15 seconds countdown.
    This is what I don't understand. I am client. I open your document. It shows be a countdown starting from, let's say 60 seconds, as this is the time loaded first time from the server. But now another user presses his button and changes the countdown to 15 seconds. Does it means that my countdown should also then change suddenly to 15 seconds? And when another client presses his button, my counter jumps again to 15 seconds? Looks like a mess to me...

  3. #3
    Join Date
    Feb 2011
    Posts
    5
    Quote Originally Posted by Kor View Post
    This is what I don't understand. I am client. I open your document. It shows be a countdown starting from, let's say 60 seconds, as this is the time loaded first time from the server. But now another user presses his button and changes the countdown to 15 seconds. Does it means that my countdown should also then change suddenly to 15 seconds? And when another client presses his button, my counter jumps again to 15 seconds? Looks like a mess to me...
    Yes, the idea is to have every client see the same thing. That is why the timer is synchronized with server time and not the client's time. It is a challenging situation, but there must be a way.

  4. #4
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by tannhutha View Post
    Objective: I'm unable to get the button to reset the countdown timer to 15 seconds regardless of who clicked it. Every time the same button is click the timer must reset to 15 seconds for everyone looking at it.
    There is no "it", everyone is looking at a different timer running in their own browser. The only way to (as far as possible) synchronise or re-synchronise the timers running on multiple browsers, is for the server to log the target expiry time, and for each browser to poll the server periodically to check whether the expiry time has been re-set. If so then the new duration is determined by comparing the current server time with the expiry time in the log file.
    The act of resetting the expiry time by any browser, would involve making a request to the server to update the log file, then all browsers could calculate the new duration the next time they poll the server.
    Accuracy could not be perfect and would be proportional to the polling frequency.
    As long as your server can cope with the expected load, there should be no problem.
    I'm almost tempted to try it as an amusing exercise.

  5. #5
    Join Date
    Feb 2011
    Posts
    5
    Quote Originally Posted by clueful View Post
    There is no "it", everyone is looking at a different timer running in their own browser. The only way to (as far as possible) synchronise or re-synchronise the timers running on multiple browsers, is for the server to log the target expiry time, and for each browser to poll the server periodically to check whether the expiry time has been re-set. If so then the new duration is determined by comparing the current server time with the expiry time in the log file.
    The act of resetting the expiry time by any browser, would involve making a request to the server to update the log file, then all browsers could calculate the new duration the next time they poll the server.
    Accuracy could not be perfect and would be proportional to the polling frequency.
    As long as your server can cope with the expected load, there should be no problem.
    I'm almost tempted to try it as an amusing exercise.
    Please try and let me know the results! I'm pulling my hairs out with no returns. It would be greatly appreciated if you could share your results with me as well. Thank you so much ahead of time.

  6. #6
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by tannhutha View Post
    Please try and let me know the results! I'm pulling my hairs out with no returns. It would be greatly appreciated if you could share your results with me as well. Thank you so much ahead of time.
    Well the theory seems to have held up quite well, although it's never going be perfect: Demo.

  7. #7
    Join Date
    Feb 2011
    Posts
    5
    Quote Originally Posted by clueful View Post
    Well the theory seems to have held up quite well, although it's never going be perfect: Demo.
    Thank you so much clueful! Everything seems to have held up very well except for one problem. When I ran the script on different browsers and click the button on one browser the other browser did not start the countdown as well. If I then click the button on the second browser the countdown works and synchronize to the 1st browser's countdown. Is there a way to get both browser to start counting down as soon as one button is clicked regardless of who did the clicking?

  8. #8
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by tannhutha View Post
    Is there a way to get both browser to start counting down as soon as one button is clicked regardless of who did the clicking?
    That's the way it works for me no matter what combination of browsers are used, so I'm not sure what to think.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles