46 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

Summering av positiva tal

En enkel summering av positiva tal. OBS! För decimaler används punkt och inte kommatecken.

 

U t g i f t e r
Hyra: kr
Mat: kr
Kläder: kr
Övrigt: kr
Summa: kr

 

 

Steg 1:
Lägg koden inom <HEAD>

 

<HEAD>

<script language="JavaScript">
function cal( amt, t )
{var len = amt.length;
if( len > 0 && amt.substring( 0, 1 ) == "$" )
{amt = amt.substring( 1, len );
}
if( parseFloat( amt ) > 0 ) {
if( parseFloat( t ) > 0 )
{t = parseFloat( t ) + parseFloat( amt ); }
else {t = parseFloat( amt );
}
}
return t;
}
function strip_amt( amt )
{var amt_char = "";
var new_amt = "";
for( var c=1; c<=amt.length; c++ )
{amt_char = amt.substring( c-1, c );
if( amt_char == "," )
{
//do nothing
} else {
new_amt = new_amt+amt_char;
}
}
amt = new_amt;
return amt;
}
function calculate_total()
{
var t = 0;
var pmt = document.PMTS;
var num = parseInt( pmt.NUM_PAY.value );
var tp
var tp1
for( var i=1; i<=num; i++ ) {
if( i == 1 ) {
if( pmt.NUM1.value == "I" ) {
amt = pmt.AMT1.value;
amt = strip_amt( amt );
t = cal( amt, t );
}
} else if( i == 2 ) {
if( pmt.NUM2.value == "I" ) {
amt = pmt.AMT2.value;
amt = strip_amt( amt );
t = cal( amt, t );
}
} else if( i == 3 ) {
if( pmt.NUM3.value == "I" ) {
amt = pmt.AMT3.value;
amt = strip_amt( amt );
t = cal( amt, t );
}
} else if( i == 4 ) {
if( pmt.NUM4.value == "I" ) {
amt = pmt.AMT4.value;
amt = strip_amt( amt );
t = cal( amt, t );
}
}
}
t = t * 100;
t = Math.round( t );
t = t / 100;
if( t != pmt.TOTAL.value ) {
if( t == 0 ) {
pmt.TOTAL.value=""
} else {
tp = t * 100;
tp1 = Math.floor( t ) * 100;
if(( tp - tp1 ) == 0 ) {
pmt.TOTAL.value = t + ".00";
} else {
tp1 = Math.floor( t * 10 ) * 10;
if(( tp - tp1 ) == 0 ) {
pmt.TOTAL.value = t + "0";
} else {
pmt.TOTAL.value = t;
}
}
}
}
setTimeout( "calculate_total()", 100 );
}
</script>

</HEAD>

För att lägga till ett summeringsfält kopierar du det sista fältets kod (nummer 4 i markerad text ovan) och klistrar in koden efter samt ändrar värdet (till 5 i exemplet ovan). Ett fält nr 5 kan se ut så här:

} else if( i == 5) {
if( pmt.NUM5.value == "I" ) {
amt = pmt.AMT5.value;
amt = strip_amt( amt );
t = cal( amt, t );

 

Steg 2:
Lägg koden inom <BODY>

 

<BODY>

<form name=PMTS id=PMTS method=POST>
<input id=NUM_PAY name=NUM_PAY type=hidden value="4">
<input id=NUM1 name=NUM1 type=hidden value="I">
<input id=NUM2 name=NUM2 type=hidden value="I">
<input id=NUM3 name=NUM3 type=hidden value="I">
<input id=NUM4 name=NUM4 type=hidden value="I">
<table cellpadding=5 cellspacing=0 border=0>
<tr align="center" bgcolor="#0099cc">
<td colspan="2">Utgifter</td>
<tr>
<td align="right">Hyra:</td>
<td> <input id=AMT1 name=AMT1 size=10 onChange="calculate_total()">
kr </td>
<tr>
<td align="right">Mat:</td>
<td><input id=AMT2 name=AMT2 size=10 onChange="calculate_total()">
kr</td>
<tr>
<td align="right">Kläder:</td>
<td><input id=AMT3 name=AMT3 size=10 onChange="calculate_total()">
kr</td>
<tr>
<td align="right">Övrigt:</td>
<td><input id=AMT4 name=AMT4 size=10 onChange="calculate_total()">
kr</td>
<tr>
<td align="right"><strong>Summa:</strong></td>
<td><strong>
<input id=TOTAL name=TOTAL size=10 readonly>
kr</strong></td>
</table>
</form>

</BODY>

Vill du lägga till ett formulärfält (nr 5) gör du så här:

  1. Ändra antalet i NUM_PAY ovan till tex:
    value="5"
  2. Lägg till ett dolt fält:
    <input id=NUM5 name=NUM5 type=hidden value="I">
  3. Lägg till ett synligt fält:
    <input id=AMT5 name=AMT5 size=10 onChange="calculate_total()"

 

Steg 3:
Lägg CSS-koden inom <HEAD>

För att justera värdena högerställt i fältet kan du använda en CSS-mall till formulärkontrollerna ovan med egenskapen "input":

<HEAD>

<style type="text/css">
<!--
input { text-align: right;}
-->
</style>

</HEAD>