Come creare una pagina Web calcoli

June 9

pagina Web calcolatori sono un modo divertente per dare ai tuoi visitatori un pratico strumento per fare un po 'di matematica veloce senza tirare fuori i loro governanti di diapositive. Calcolatrici aggiungere un po 'di divertimento e brio al tuo sito web. Se si stanno promuovendo un prodotto o servizio, calcolatrici può aiutare a ottenere il vostro messaggio ai vostri clienti e generare visitatori abituali. JavaScript consente di creare i calcoli a destra sulla tua pagina web, utilizzando i numeri i visitatori digitare in un form HTML. Questo semplice calcolatrice è il punto di partenza per progettare il proprio calcolatrice pagina Web personalizzata.

istruzione

1 Aprire la pagina web dove vuoi la calcolatrice.

2 Copiare il seguente script nella sezione di intestazione della pagina (tra i tag <head> e </ head> tag sopra il tag <body>).

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

var v1 = 0

ANDARE

var v2 = 0

ANDARE

var answer = 0

ANDARE

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

ANDARE

var elem

ANDARE

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

ANDARE

elem.value = v1

ANDARE

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

ANDARE

elem.value = v2

ANDARE

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

ANDARE

elem.value = answer

ANDARE

}

Funzione setValue (elem) {
var val = 0.0

ANDARE

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

ANDARE

}
else {
val = 0.0

ANDARE

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

ANDARE

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

ANDARE

}
calculate()

ANDARE

}
&lt;/script>

3 Aggiungere il onload attributo = \ "calcolare (), \" al tag <body>, in modo che appaia questo: <body onload = \ "calcolare (); \">. Se ci sono altri attributi del tag body, non li elimina, basta aggiungere il nuovo attributo onload.

4 Nel corpo della pagina web, aggiungere il seguente form HTML in cui si desidera avere la calcolatrice appare:

<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 Modificare il calcolo cambiando la riga "risposta = V1 + V2" nella sezione JavaScript. Ad esempio, se si desidera moltiplicare invece di aggiungere, modificare il segno più per un asterisco (*) in questo modo:

answer = v1 * v2

Aggiornare il modulo HTML per mostrare il nuovo calcolo.

Consigli e avvertenze

  • Aggiungere testo, stile e colore alla forma di calcolo. Disporre le tag input il modo in cui si desidera vengano visualizzati. Aggiungere descrizioni ai campi di input. Mettere un contorno rosso intorno alla risposta. Essere creativo.
  • Sperimentare con la forma JavaScript e HTML. Avete bisogno di eseguire un calcolo su più di due numeri? Per ogni riga di codice che ha un "v2" (tranne la linea di calcolo) copiare il codice di una nuova linea e il cambiamento "v2" a "v3". Aggiungere il nuovo valore "v3" per il calcolo del Javascript, come questo : "answer = V1 + V2 + v3."