Hvordan lage en Beregninger webside

Webside kalkulatorer er en morsom måte å gi de besøkende et nyttig verktøy for å gjøre litt rask matematikk uten å trekke ut sine lysbilde herskere. Kalkulatorer legge til litt moro og pizzazz til ditt nettsted. Hvis du er fremme et produkt eller en tjeneste, kan kalkulatorer hjelpe deg å få ditt budskap til dine kunder og generere gjenta besøkende. Javascript kan du lage beregninger rett på websiden din, ved hjelp av tall besøkende skriver inn et HTML-skjema. Denne enkle kalkulatoren er utgangspunktet for å designe dine egne nettside kalkulator.

Bruksanvisning

1 Åpne nettsiden der du vil at kalkulatoren.

2 Kopier følgende skript i overskriften delen av siden (mellom <head> og </ head> taggene over <body>).

&lt;script type=\&quot;text/javascript\&quot; language=\&quot;Javascript\&quot;>

Var v1 = 0

GÅ

var v2 = 0

GÅ

var answer = 0

GÅ

function calculate () {
// The Calculation: change operator in this equation to change the calculation
answer = v1 + v2

GÅ

var elem

GÅ

elem = document.getElementById(\&quot;v1\&quot;)

GÅ

elem.value = v1

GÅ

elem = document.getElementById(\&quot;v2\&quot;)

GÅ

elem.value = v2

GÅ

elem = document.getElementById(\&quot;answer\&quot;)

GÅ

elem.value = answer

GÅ

}

funksjon SetValue (elem) {
Var val = 0,0

GÅ

if (elem.value != \&quot;\&quot;) {
val = parseFloat(elem.value)

GÅ

}
else {
val = 0.0

GÅ

}
switch (elem.id) {
case \&quot;v1\&quot;: v1 = val; break

GÅ

case \&quot;v2\&quot;: v2 = val; break

GÅ

}
calculate()

GÅ

}
&lt;/script>

3 Legg attributtet onload = \ "beregn (); \" til <body>, så det ser ut: <body onload = \ "beregn (); \">. Hvis det er andre attributter i kroppen koden, må du ikke slette dem, bare legge den nye onload attributtet.

4 I kroppen på websiden din, legger du til følgende HTML skjema hvor du ønsker å ha kalkulatoren vises:

<Form>

&lt;input type=\&quot;text\&quot; id=\&quot;v1\&quot; onKeyUp=\&quot;javascript: setValue(this);\&quot;> +
&lt;input type=\&quot;text\&quot; id=\&quot;v2\&quot; onKeyUp=\&quot;javascript: setValue(this);\&quot;> =
&lt;input type=\&quot;text\&quot; id=\&quot;answer\&quot; readonly>

</ Form>

5 Endre beregningen ved å endre linjen "svar = v1 + v2" i Javascript-delen. For eksempel, hvis du ønsker å multiplisere i stedet for legg, endre på plusstegnet til en stjerne (*) som dette:

answer = v1 * v2

Oppdatere HTML-skjema for å vise den nye beregningen.

Hint

  • Legg til tekst, stil og farge av beregningsskjemaet. Legg ut inngangs kodene slik du vil de skal vises. Legg beskrivelser til inngangsfelt. Sett en rød omriss rundt svaret. Vær kreativ.
  • Eksperimentere med Javascript og HTML-skjema. Trenger du å utføre en beregning på mer enn to tall? For hver linje med kode som har en "v2" (bortsett fra beregningslinjen) kopier koden til en ny linje og endring "v2" til "v3". Legg til den nye "v3" verdi for beregningen i Javascript, som dette : "answer = v1 + v2 + v3."