www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to limit number display

  1. #1
    Join Date
    Feb 2013
    Posts
    6

    How to limit number display

    I'm a cut and paste script guy and play with variables, but write no code.

    I'm using a count up script that I want to set how many digits / numbers are displayed. The variables use large numbers and for this particular display I want to use three digits and a decimal, e.g. 16.5 versus 16.00000000000000.

    Here is my code:


    var START_DATE = new Date("February 27, 2013 11:53:00"); // put in the starting date here
    var INTERVAL = 1; // in seconds
    var INCREMENT = .000000048994; // increase per tick
    var START_VALUE = 16.6; // initial value when it's the start date
    var count = 0;




    window.onload = function() {
    var msInterval = INTERVAL * 1000;
    var now = new Date();
    count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
    document.getElementById('counter').innerHTML = addCommas(count.toString());
    setInterval(incrCount, msInterval);
    }

    function incrCount() {
    count += INCREMENT;
    document.getElementById('counter').innerHTML = addCommas(count.toString());
    }

    function addCommas(nStr){
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
    }


    </script>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    I understand ?
    To add commas separator try this :
    Code:
    function addCommas(nStr){
    	return (''+nStr).replace(/(\d{3})(?=\d)/g,'$1,')
    }
    We replace all three digits followed by a non-captured digit (with a positive assertions ?=), by the three digits and a comma.
    Last edited by 007Julien; 03-01-2013 at 07:28 AM.

  3. #3
    Join Date
    Mar 2013
    Posts
    1
    One way is to limit the possible options at server side.

  4. #4
    Join Date
    Feb 2013
    Posts
    6

    Thanks, but this doesn't shorten my display number to three digits, e.g. 16.5

    Quote Originally Posted by 007Julien View Post
    I understand ?
    To add commas separator try this :
    Code:
    function addCommas(nStr){
    	return (''+nStr).replace(/(\d{3})(?=\d)/g,'$1,')
    }
    We replace all three digits followed by a non-captured digit (with a positive assertions ?=), by the three digits and a comma.
    I want to shorten my display number to three digits, from 16,xxx,xxx,xxx,xxx to 16.x

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    To display the number of seconds since a start date, this could be a answer:
    Code:
    var START_DATE = new Date("February 27, 2013 11:53:00"); // put in the starting date here
    window.onload = function() {
    	incrCount();
    	setInterval(incrCount,1000);
    }
    function incrCount() {
    	count=Math.floor((new Date().valueOf()-START_DATE.valueOf())/1000)
    	document.getElementById('counter').innerHTML =(''+count).replace(/(\d)(?=(\d\d\d)+\b)/,'$1,');
    }
    Since the method count.toFixed(n) transform a number in a string with n digits after the point, while count=Math.floor(count*Math.pow(10,n))/Math.pow(10,n); preserve a number with at most n digits after the point.
    Last edited by 007Julien; 03-01-2013 at 10:49 AM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440
    Quote Originally Posted by pastajon View Post
    I want to shorten my display number to three digits, from 16,xxx,xxx,xxx,xxx to 16.x
    How big are your numbers?
    Do you want it to be limited to 10.0 to 99.9 only? If yes, use number.toFixed(1).
    Above will limit decimal display to 1 digit and not limit the integer portion.

  7. #7
    Join Date
    Feb 2013
    Posts
    6
    Where do I place number.toFixed(1) ?

    Yes, I can be limited to 10.0 to 99.9.

    Do I place it somewhere within this new string of code?

    return (''+nStr).replace(/(\d{3})(?=\d)/g,'$1,')
    }

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    Not sure you need addCommas() function if output is limited to xx.x display.
    See commented line if this is your desire


    Modified with recommendation from post #5 also.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <div id="counter"></div>
    
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?273809-How-to-limit-number-display&p=1253049#post1253049
    // with suggestions from post #5
    
    var START_DATE = new Date("February 27, 2013 11:53:00"); // put in the starting date here
    var START_VALUE = 16.6; // initial value when it's the start date
    
    window.onload = function() {
    	incrCount();
    	setInterval(incrCount,1000);
    }
    function incrCount() {
    	count=Math.floor((new Date().valueOf()-START_DATE.valueOf())/1000) +START_VALUE;
            count = count % 100;  // use if display is to be limited to 0.0 to 99.9 only, otherwise remove line
    	document.getElementById('counter').innerHTML = count.toFixed(1);
    }
    
    </script> 
    </body>
    </html>

  9. #9
    Join Date
    Feb 2013
    Posts
    6
    JMRKER,

    Your solution accomplishes what I am wanting, a three digit display. Now I just need to work on the equation to reflect the rate I'm after:

    The national debt grows at a rate of $48,994 per second and I want the display to reflect the total in trillions, e.g. 16.6.

    I appreciate the help you have given!

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    You accuracy of trillion increments willl not change very much.
    Here is an example of that and a millions display and actual (as much accuracy as computer will allow)

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <div id="counter"></div>
    <div id="counterMillion"></div>
    <div id="counterActual"></div>
    
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?273809-How-to-limit-number-display&p=1253049#post1253049
    
    var START_DATE = new Date("February 27, 2013 11:53:00"); // put in the starting date here
    var START_VALUE = 16600000000000;  // initial value when it's the start date (16.6 trillion)
    
    var Trillion     = 1000000000000;  // representation of 1 trillion
    var incAmount = 48994;             // debt increase per second
    
    window.onload = function() {
      incrCount();
      setInterval(incrCount,1000);
    }
    function incrCount() {
      var now = new Date();
      count = (START_VALUE + ((now - START_DATE)/1000) * incAmount);
      document.getElementById('counter').innerHTML = (count/Trillion).toFixed(1)+' trillion';
      document.getElementById('counterMillion').innerHTML = (count/1000000).toFixed(1)+' million';
      document.getElementById('counterActual').innerHTML = count.toFixed(1)+' dollars';
    }
    
    </script> 
    </body>
    </html>

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