www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with javascript counter

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Posts
    5

    Question Need help with javascript counter

    Hey there. I'm a semi-newbie and was wondering if anyone could help me build a simple JS counter that essentially do this:

    A)Would start at a custom defined number (ie 5000)

    B)Count up by a number (400) every second

    C)The page's count would be the same to anyone who was viewing it. Basically, after the counter had been running for a day, when a user loaded the page, the loaded number would not be the original 5000, but 5000+400x, when x=amount of time passed.


    Any help is appreciated, of course credits to anyone who writes code, perhaps future programming opportunity.

    Thanks,
    Ez

  2. #2
    Join Date
    Mar 2009
    Posts
    512
    You can try something like this, but understand that you are going to have to hard code the date at which it started running into the window.onload() function. Uncomment the alert to get that information, then it will have to be adapted--otherwise it will start out from the original value which is not what you want it to do.

    Code:
    <html>
    <head>
    <script type ="text/javascript">
    function createCounter(startTime, startNumber, displayId){
        var x = {
    	     displayId: null,
    	     display: 0,
    	     timer: null
        };
        
        x.run = function(){
    	var clock = new Date();
    	var current = clock.getTime();
    	x.display = (((current - startTime) * 400) + startNumber);
    	x.displayId = document.getElementById(displayId);
    	x.timer = setTimeout(x.advance, 1000);
        }
    
        x.advance = function(){
    	x.display += 400;
    	var z = document.createTextNode(x.display);
    	if (x.displayId.firstChild){
    	    x.displayId.removeChild(x.displayId.firstChild);
    	}
    	x.displayId.appendChild(z);
            x.timer = setTimeout(x.advance, 1000);
        }
        return x;
    }
    
    var clock;  //global variable
    
    window.onload = function(){
        var d = new Date();
        var start = d.getTime();
        var original = 5000;
        var display = 'counter';
        //alert("Copy this value down  to hard code into the function" + start);
        clock = createCounter(start, original, display);
        clock.run();
    }
        
    </script>
    </head>
    <body>
    <div id = "counter">
    </div>
    </body>
    </html>
    Last edited by Tcobb; 12-27-2010 at 03:06 PM. Reason: took out alert inserted for debugging purposes

  3. #3
    Join Date
    Dec 2010
    Posts
    5

    Question Original Date Question

    Quote Originally Posted by Tcobb View Post
    You can try something like this, but understand that you are going to have to hard code the date at which it started running into the window.onload() function. Uncomment the alert to get that information, then it will have to be adapted--otherwise it will start out from the original value which is not what you want it to do.

    Code:
    <html>
    <head>
    <script type ="text/javascript">
    function createCounter(startTime, startNumber, displayId){
        var x = {
    	     displayId: null,
    	     display: 0,
    	     timer: null
        };
        
        x.run = function(){
    	var clock = new Date();
    	var current = clock.getTime();
    	x.display = (((current - startTime) * 400) + startNumber);
    	x.displayId = document.getElementById(displayId);
    	x.timer = setTimeout(x.advance, 1000);
        }
    
        x.advance = function(){
    	x.display += 400;
    	var z = document.createTextNode(x.display);
    	if (x.displayId.firstChild){
    	    x.displayId.removeChild(x.displayId.firstChild);
    	}
    	x.displayId.appendChild(z);
            x.timer = setTimeout(x.advance, 1000);
        }
        return x;
    }
    
    var clock;  //global variable
    
    window.onload = function(){
        var d = new Date();
        var start = d.getTime();
        var original = 5000;
        var display = 'counter';
        //alert("Copy this value down  to hard code into the function" + start);
        clock = createCounter(start, original, display);
        clock.run();
    }
        
    </script>
    </head>
    <body>
    <div id = "counter">
    </div>
    </body>
    </html>

    Great! Thanks so much. I'm a little confused as to the "alert". I turned the whole thing into an HTML page and it works, but as to the continuity of the timer, I realize it is beyond my grasp. Suppose the beginning date was November 9th, 2010. How would the script look then? Where would I add that information? Once again thanks for the quick reply

  4. #4
    Join Date
    Jan 2009
    Location
    127.0.0.1
    Posts
    126
    <script>
    <!--
    var milisec=0
    var seconds=0
    var number=0
    document.d.d2.value='0'
    function display(){
    if (milisec>=9){
    milisec=0
    seconds+=1
    number = 5000 + 400*seconds
    }
    else
    milisec+=1

    document.d.d2.value=number
    setTimeout("display()",100)
    }
    display()
    //-->
    </script>
    </body>
    </html>

    this is not entirely my own work, just added a line to make it work for you.

    here is the original site: http://www.javascriptkit.com/script/cut19.shtml

  5. #5
    Join Date
    Mar 2009
    Posts
    512
    Great! Thanks so much. I'm a little confused as to the "alert". I turned the whole thing into an HTML page and it works, but as to the continuity of the timer, I realize it is beyond my grasp. Suppose the beginning date was November 9th, 2010. How would the script look then? Where would I add that information? Once again thanks for the quick reply

    If you uncomment the alert, when you start it up that will be the start date and the alert will give you a long number. Take that number and use it in a new replacement 'window.onload()' function:
    Code:
    window.onload = function(){
        var start = that long number you copied down, without quotes around it;
        var original = 5000;  //this is the custom starting value--change it if you need to
        var display = 'counter';  //this is the HTML id of the element that displays the count
        clock = createCounter(start, original, display);
        clock.run();
    }
    Then it should do what you want it to do.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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