Create a running Meter

paulorlowski · Apr 17, 2003

I modified some code to create a running meter with integers which works in the code below.
$7,024,200
$7,024,201
$7,024,202

In the second example I want to add 2 decimal places, but I'm having problems. The number shifts left and right which creates an annoying flashing look and makes it hard to read. I'm also getting extra commas and extra 9's after the decimal: $7,024,200.,029999999

I'd appreciate some help.
Paul

<html>
<body>
<script Language="JavaScript">
<!--
//Display Energy Costs like a running meter or gauge on a gas pump.
//Integer display works great
var num;
function displayPumpReading() {
num = 7024200;
updatePumpReading();
}
function updatePumpReading() {
var intValue;
var displayValue;
var strValue;
var strLen;
intValue = Math.ceil(num + parseFloat(0.01));
strValue = intValue.toString();
strLen = strValue.length;
document.Energycost.local.size = strLen
displayValue = "";
for(i = strLen; i > 0; i -= 3) {
displayValue = "," + strValue.substring(i-3,i) + displayValue;
}
displayValue = "$ " + displayValue.substring(1,displayValue.length);
document.Energycost.local.value = displayValue;
num += 0.01;
setTimeout("updatePumpReading()","10&quot

;
}
// -->

<!--
// Display 2 decimals
// Get rid of commas and annoying flashing
var num;
function displayPumpReadingD() {
num = 7024200.00;
updatePumpReadingD();
}
function updatePumpReadingD() {
var intValue;
var displayValue;
var strValue;
var strLen;
// intValue = Math.ceil(num + parseFloat(0.01));
intValue = Math.abs(num + parseFloat(0.01));
strValue = intValue.toString();
strLen = strValue.length;
document.EnergycostD.local.size = strLen
displayValue = "";
for(i = strLen; i > 0; i -= 3) {
displayValue = "," + strValue.substring(i-3,i) + displayValue;
}
displayValue = "$ " + displayValue.substring(1,displayValue.length);
document.EnergycostD.local.value = displayValue;
num += 0.01;
setTimeout("updatePumpReadingD()","10&quot

;
}
// -->
</script>

Integer Gauge<form name="Energycost">
<input type="text" name="local" class="pumptextbox" style="width: 160px;" size="20"><p>
</form>

<script>

</script>

Decimal Gauge:
<form name="EnergycostD">
<input type="text" name="local" class="pumptextbox" style="width: 160px;" size="20"><p>
</form>

<script>

</script>

</body>
</html>

friendlyposter · Apr 17, 2003

Your number can be stabilized by chopping after 2 decimal places like at the gas pumps.

Right after the line:
strValue = intValue.toString();

Add the following lines:

var decpointP = strValue.indexOf('.');
if (decpointP>-1) {
strValue = (strValue+'00').substring(0,decpointP+3);
}

jlsmithhartfiel · Apr 17, 2003

This might get you a little further.

1. use a different variable for the 2nd number; they're overlapping
2. do as friendly poster suggests to strip off the decimals before you add the commas; then you can add it back on.
3. problem with this revision is it works for the first 2 cycles, but on #3, js doesn't seem to add correctly. Have a run & see the alert messages & you'll see what I mean.

good luck!

Code:

function updatePumpReadingD() {
    var intValue;
    var displayValue;
    var strValue;
    var strLen;
    //intValue = Math.ceil(num2 + parseFloat(0.01));
    alert(&quot;here\n&quot; + num2 + &quot;\n&quot; + parseFloat(0.01) + &quot;\n&quot; + (num2 + parseFloat(0.01)));
    intValue = Math.abs(num2 + parseFloat(0.01));
    alert(&quot;num2 &quot; + num2 + &quot;\n&quot; + intValue);
    strValue = intValue.toString();
    strLen = strValue.length - 3;
    strParams = strValue.split(&quot;.&quot;);
    document.EnergycostD.local.size = strLen
    displayValue = &quot;&quot;;
    for(i = strLen; i > 0; i -= 3) {
    alert(displayValue);
        displayValue = &quot;,&quot; + strValue.substring(i-3,i) + displayValue;
    }
    displayValue = &quot;$ &quot; + displayValue.substring(1,displayValue.length) + &quot;.&quot; + strParams[1];
    document.EnergycostD.local.value = displayValue;
     //return false;
     alert(&quot;before &quot; + num2 + &quot;\n&quot; + displayValue);
    num2 += 0.01;
    alert(&quot;after &quot; + num2 + &quot;\n&quot; + displayValue);
    ctr += 1;
    if (ctr == 3) 
     return false;
    setTimeout(&quot;updatePumpReadingD()&quot;,&quot;10&quot;);
}
// Display 2 decimals
// Get rid of commas and annoying flashing
var num2;
function displayPumpReadingD() {
    num2 = 7024200.00;
    updatePumpReadingD();
}

Jessica

paulorlowski · Apr 18, 2003

Thanks friendlyposter. It looks much better.
Thank you Jessica for your ideas.

So great to be able to get some help.
Paul

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Create a running Meter

paulorlowski

Programmer

friendlyposter

Programmer

jlsmithhartfiel

Programmer

paulorlowski

Programmer

Similar threads

Part and Inventory Search

Sponsor