Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question A question about a Real time minute counter implementation

    Dear all,

    I have a requirement about implementing a counter of minutes starting from a specific date and I would appreciate if you could kindly give me a hand.

    Problem description:
    Let's say that we have a specific date, for example, 14th March 2008, that is, in JavaScript new Date(2008, 2, 14). What I need is to calculate the number of minutes between that date and today (today is obviously the current time at the moment where the HTML page including my JavaScript is being opened in the web browser) and print the result as a real time clock, which indicates the number of minutes followed by the number of seconds which are being modified in real time each second.

    Implementation:
    I'm quite beginner in JavaScript and after looking W3School documentation and several examples, I've managed to implement the following code
    Code:
    <!doctype html>
        <head>
            <meta charset="UTF-8">
            <title>Minute counter</title>
            <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
            <script type="text/JavaScript">
            
                var dateToday = new Date();
                
                /* 
                 * So this is the date since then I want to calculate
                 * the number of minutes 
                 * 
                 * Year = 2008, Month = march, Day of the month = 14
                 */ 
                var startDate = new Date(2008, 2, 14);
                
                var minutes = 0;
                var seconds = 0;
                
               
                // This is the function that calculates the number of minutes
                function getEllapsedMinutes()
                {  
                    dateToday = new Date();
                    startDate = new Date(2008, 2, 14);
                    
                    var result = 
                        Math.round
                        (
                            Math.abs(dateToday - startDate) / (60 * 1000)
                        );
                    
                   return result;
                }
                          
                
                /*
                    This function will be called each second in order to
                    show on the screen (in real time) the chnage of minutes
                    and seconds
                */
                function updateCounter()
                {
                    seconds = new Date().getSeconds();
                    
                    if (seconds == 0)
                    {
                        minutes = getEllapsedMinutes();
                    }
                    
                    // print 00, 01, 02, ... instead if 0, 1, 2, ...
                    seconds = (seconds < 10)?"0"+seconds:seconds;
                    
                    // printing minute with comma separator for thousands
                    minutes = 
                        minutes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        
                    document.getElementById("minutesCell").innerHTML =
                        "<b>" + minutes + "</b> minutes and <b>" + seconds + 
                        "</b> seconds";
                }
                
                
                function printMinutes()
                {
                    minutes = getEllapsedMinutes();
                    window.setInterval(updateCounter, 1000);
                }
                
            </script>
            <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
        </head>
        <body onload="printMinutes();">
        <table>
            <tbody>
                <tr>
                    <td id="minutesCell"></td>
                </tr>
            </tbody>
        </table>
        </body>
    </html>
    You can save the above code in an html file and view the result.

    I would like to ask you, kindly have a look at my code and tell me whether I'm on the right track. However, it seems to me that there is some bug in the code which unfortunately I couldn't manage to detect. For example if at the moment when you open the page, the value of the seconds (read from the current date) is 48 seconds (just an example), then after 59 (when it becomes 00) it does not increment the moment, but then for next iterations (I mean function calls every seconds), apparently it works as expected.

    Thanks a lot for your attention and your guidance,

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    The problem is the Math.round function here, because it rounds to the nearest integer. If you have minutes like 2543768,5 (which is 2543768 minutes and 30 seconds) it will already give you 2543769 minutes as a result

    Try using Math.floor instead of Math.round

  • Users who have thanked devnull69 for this post:

    dariyoosh (11-04-2013)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by devnull69 View Post
    The problem is the Math.round function here, because it rounds to the nearest integer. If you have minutes like 2543768,5 (which is 2543768 minutes and 30 seconds) it will already give you 2543769 minutes as a result

    Try using Math.floor instead of Math.round
    Hello there,

    Thanks a lot for this information. I didn't know this and in fact using floor instead of round solved the synchronization problem (during incrementation of the minutes variable).

    Meanwhile, I also managed to achieve the same result by using Math.round. But, in this way instead of calling each second getEllapsedMinutes() I just simply increment the minutes variable whenever the second is zero, in other words, once the difference of minutes is calculated by calling getEllapsedMinutes() function at the beginning (when the page is loaded) it is useless to call each again each second, in fact all is needed is to store the value in a global variable and just increment it whenever the seconds (according to the clock of the client computer) is zero.

    So here is the new version which works now
    Code:
    . . .
    
        var dateToday = new Date();
        var startDate = new Date(2008, 2, 5);
        
        var minutes = 0;
        var seconds = 0;
        
        function getEllapsedMinutes()
        {  
            dateToday = new Date();                            
            
            var retMinutes = 
                Math.round
                (
                    Math.abs(dateToday - startDate) / (60 * 1000)
                );
            
            return retMinutes;
        }
                    
        
        function updateCounter()
        {
            seconds = new Date().getSeconds();
                            
            if (seconds == 0)
            {
                ++minutes;
            }
            
            // print 00, 01, 02, ... instead if 0, 1, 2, ...
            seconds = (seconds < 10)?"0"+seconds:seconds;
            
            minutesStr = 
                minutes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                
            document.getElementById("minutesCell").innerHTML =
                "<b>" + minutesStr + "</b> minutes et <b>" + seconds + 
                "</b> secondes";
        }
        
        
        function printMinutes()
        {
            minutes = getEllapsedMinutes();
            window.setInterval(updateCounter, 1000);
        }
        
    </script>
    . . .
    Once again, thank you very much for your time and for your help.


  •  

    Posting Permissions

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