Hur man skapar en Beräkningar webbsida

March 22

Webbsida räknare är ett roligt sätt att ge besökarna ett praktiskt verktyg för att göra en liten snabb matte utan att dra ut sina glid härskare. Räknare lägga till lite kul och KRAFT till din webbplats. Om du gör reklam en produkt eller tjänst, kan räknare hjälpa dig att få ditt budskap till dina kunder och generera återkommande besökare. JavaScript kan du skapa beräkningar direkt på din webbsida, med hjälp av siffror besökarna skriver i ett HTML-formulär. Denna enkla räknare är utgångspunkten för att utforma dina egna webbsida kalkylator.

Instruktioner

1 Öppna webbsida där du vill att din miniräknare.

2 Kopiera följande skript i huvudsektionen på sidan (mellan <head> och </ head> taggarna ovanför <body> taggen).

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

var v1 = 0

var v2 = 0

var answer = 0

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

var elem

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

elem.value = v1

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

elem.value = v2

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

elem.value = answer

}

Funktionen setValue (elem) {
var val = 0,0

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

}
else {
val = 0.0

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

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

}
calculate()

}
&lt;/script>

3 Lägga till attributet onload = \ "beräkna (); \" till <body> taggen, så det ser så här: <body onload = \ "beräkna (); \">. Om det finns andra attribut i kroppen taggen, inte ta bort dem, bara lägga till nya onload attribut.

4 I kroppen av webbsidan, lägga till följande HTML-formuläret där du vill ha räknaren visas:

<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 Ändra beräkningen genom att ändra raden "answer = v1 + v2" i JavaScript avsnittet. Till exempel, om du vill att föröka i stället för lägga till, ändra på plustecknet till en asterisk (*) så här:

answer = v1 * v2

Uppdatera HTML-formulär för att visa den nya beräkningen.

Tips

  • Lägga till text, stil och färg till beräkningsprotokoll. Lägg ut ingångs taggar som du vill att de ska visas. Lägg till beskrivningar till inmatningsfält. Sätt en röd kontur runt svaret. Vara kreativ.
  • Experimentera med JavaScript och HTML-formulär. Behöver du utföra en beräkning på mer än två siffror? För varje kodrad som har en "v2" (utom beräkningsradens) kopiera koden till en ny rad och förändring "v2" till "v3." Lägg det nya värdet "v3" till beräkningen i Javascript, som den här "answer = v1 + v2 + v3."

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2020 Astrixsoft.com | Contact us: webmaster# astrixsoft.com