Pagina Web calcolatrici sono un divertente modo per dare ai tuoi visitatori uno strumento utile per fare un po' di matematica rapido senza tirare fuori i loro righelli di diapositiva. Calcolatori di aggiungere un po' di divertimento e slancio al tuo sito Web. Se stai promuovendo un prodotto o un servizio, calcolatrici consentono di ottenere il vostro messaggio ai vostri clienti e generare visitatori abituali. JavaScript consente di creare calcoli proprio sulla tua pagina web, utilizzando i numeri i visitatori tipo in un modulo HTML. Questa semplice calcolatrice è il punto di partenza per progettare il tuo calcolatore di pagina web personalizzata.

Istruzioni

1

Aprire la pagina web in cui si desidera che il vostro calcolatore.

2

Copiare il seguente script nella sezione dell'intestazione della pagina (tra il < head > e < / head > Tag sopra il tag < body >).

<script type=\"text/javascript\" language=\"Javascript\">

var v1 = 0

VAI

var v2 = 0

VAI

var answer = 0

VAI

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

VAI

var elem

VAI

elem = document.getElementById(\"v1\")

VAI

elem.value = v1

VAI

elem = document.getElementById(\"v2\")

VAI

elem.value = v2

VAI

elem = document.getElementById(\"answer\")

VAI

elem.value = answer

VAI

}

function setValue(elem) {
var val = 0.0

VAI

if (elem.value != \"\") {
val = parseFloat(elem.value)

VAI

}
else {
val = 0.0

VAI

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

VAI

case \"v2\": v2 = val; break

VAI

}
calculate()

VAI

}
</script>3

Aggiungere onload attributo = \ "calcolare ();} \" al tag < body >, quindi sembra questo: < onload del corpo = \ "calcolare ();} \" >. Se ci sono altri attributi nel tag body, non eliminarli, basta aggiungere il nuovo attributo onload.

4

Nel corpo della pagina web, aggiungere il seguente modulo HTML dove si desidera visualizzare la calcolatrice:

< forma >

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

< / form >

5

Modificare il calcolo modificando la riga "risposta = v1 + v2" nella sezione JavaScript. Ad esempio, se si desidera moltiplicare invece Aggiungi, è possibile modificare il segno su un asterisco (*) come questo:

risposta = v1 * v2

Aggiornare il modulo HTML per visualizzare il nuovo calcolo.

Consigli & Avvertenze

• Aggiungere testo, stile e colore per il modulo di calcolo. Stendere il tag input il modo che si desidera vengano visualizzati. Aggiungere descrizioni per i campi di input. Mettere un contorno rosso intorno la risposta. Essere creativi.
• Sperimentare con la forma di JavaScript e HTML. È necessario eseguire un calcolo su più di due numeri? Per ogni riga di codice che ha un "v2" (tranne linea calcolo) copiare il codice di una nuova linea e cambiare "v2" per "v3". Aggiungere il nuovo valore di "v3" per il calcolo in Javascript, come questo: "risposta = v1 + v2 + v3."