Tecnología

Inicio

Cómo crear una página Web Cálculos

calculadoras de las páginas web son una forma divertida de dar a sus visitantes una herramienta útil para hacer un poco de matemáticas rápida sin tener que sacar sus gobernantes de diapositivas. Calculadoras añadir un poco de diversión y dinamismo a su sitio web. Si usted está promoviendo un producto o servicio, calculadoras pueden ayudarle a conseguir su mensaje a sus clientes y generar visitantes de la repetición. JavaScript permite crear cálculos de la derecha en su página web, utilizando los números de sus visitantes escriba en un formulario HTML. Esta calculadora es el punto de partida para el diseño de su propia calculadora de la página web personalizada.

Instrucciones

1 Abrir la página web en la que desea que su calculadora.

2 Copia el siguiente script en la sección de encabezado de la página (entre las etiquetas <head> y </ head> encima de la etiqueta <body>).

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

var v1 = 0

IR

var v2 = 0

IR

var answer = 0

IR

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

IR

var elem

IR

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

IR

elem.value = v1

IR

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

IR

elem.value = v2

IR

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

IR

elem.value = answer

IR

}

función setValue (elem) {
var val = 0.0

IR

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

IR

}
else {
val = 0.0

IR

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

IR

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

IR

}
calculate()

IR

}
&lt;/script>

3 Añadir el atributo onload = \ "calcular (); \" a la etiqueta <body>, por lo que parece esto: <body onload = \ "calcular (); \">. Si hay otros atributos de la etiqueta del cuerpo, no los elimine, sólo tiene que añadir el nuevo atributo onload.

4 En el cuerpo de su página web, añadir el siguiente formulario HTML en el que le gustaría tener la calculadora aparecerá:

<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 Cambiar el cálculo cambiando la línea "respuesta = v1 + v2" en la sección de JavaScript. Por ejemplo, si desea multiplicar en lugar de añadir, cambiar el signo más para un asterisco (*) como esto:

answer = v1 v2 *

Actualizar el formulario HTML para mostrar el nuevo cálculo.

Consejos y advertencias

  • Añadir texto, estilo y color a la forma de cálculo. Coloque las etiquetas de entrada de la forma en que desea que aparezcan. Añadir las descripciones de los campos de entrada. Ponga un contorno rojo alrededor de la respuesta. Ser creativo.
  • Experimentar con la forma JavaScript y HTML. ¿Es necesario realizar un cálculo de más de dos números? Por cada línea de código que tiene una "v2" (excepto la línea de cálculo) copiar el código para una nueva línea y el cambio "v2" a "v3". Añadir el nuevo valor "v3" para el cálculo en el Javascript, como este : "answer = v1 + v2 + v3."