ubiquitour.com

Como hacer una calculadora con Dreamweaver

Trabajar con Javascript en Dreamweaver le proporciona la capacidad para realizar una calculadora que puede Agregar a su página Web. Los visitantes de su sitio será capaces de hacer clic en los botones de la imagen de la calculadora como si se tratara de una calculadora real, y será capaces de usar la adición, resta, multiplicación y división de funciones para calcular resultados basados en sus entradas. Todo el trabajo se realiza en la página, por lo que no necesitará crear o acceder a una base de datos para que funcione correctamente el proceso.

Instrucciones

1 Inicie Dreamweaver.

2 Haga clic en "Archivo" en la parte superior de la ventana, haga clic en "Abrir", busque el archivo que desea insertar la calculadora y haga doble clic en el archivo.

3 Haga clic en "Código" en la parte superior de la ventana y luego vaya a la ubicación en la Página Web donde desea mostrar la calculadora.

mespace Escriba el siguiente código en su página Web donde quieres la calculadora aparezca.

< la tabla clase = "calcbuttons" cellpadding = "4" >< tr >< td colspan = 4 >< estilo div = "texto-alinee: Centro;" >< entrada clase = "inputform" id = "calculadora" tipo = "texto" / >< / div >< /td >< /tr >< tr >< td >< clase de entrada = "calcbuttons" type = "button" value = "1" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "2" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "3" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = onclick="calcbutton(this.value) '/';" / >< /td >< /tr >< tr >< td >< clase de entrada = "calcbuttons" type = "button" value = "4" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "5" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "6" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value ='* ' onclick="calcbutton(this.value);" / >< /td >< /tr >< tr >< td >< clase de entrada = "calcbuttons" type = "button" value = "7" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "8" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = "9" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value ='-' onclick="calcbutton(this.value);" / >< /td >< /tr >< tr >< td >< clase de entrada = "calcbuttons" type = "button" value = "0" onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value ='. ' onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = 'C' onclick="calcbutton(this.value);" / >< /td >< td >< clase de entrada = "calcbuttons" type = "button" value = onclick="calcbutton(this.value) '+';" / >< /td >< /tr >< tr >< td colspan = 4 >< estilo div = "texto-alinee: Centro;" >< entrada clase = "inputform" type = "button" value =' = ' onclick="calculate(document.getElementById('calculator').value);" / >< / div >< /td >< /tr >< / table >

5 Vaya a la sección "< head >" de tu página y a continuación, inserte el código siguiente antes de la etiqueta "< / cabeza >".

< estilo tipo = "text/css" >{Table.calcbuttons}fondo color: #cccccc;

frontera: 1px solid #000000;

}

{Input.calcbuttons}margen: 3px;

anchura: 90%;

}

< / estilo >< script tipo = "texto/javascript" >función calcbutton(buttonValue) {}

if (buttonValue == 'C') { document.getElementById('calculator').value = ''; } else { document.getElementById('calculator').value += buttonValue; }

}función calculate(equation) {}

var answer = eval(equation); document.getElementById('calculator').value = answer;

}< /script >

6 Haga clic en "Archivo" en la parte superior de la ventana y haga clic en "Guardar". Puede haga clic en el botón "Diseño" en la parte superior de la ventana y haga clic en "Live View" para probar la funcionalidad de la calculadora en Dreamweaver.

Consejos y advertencias

  • Puede modificar la apariencia de la calculadora mediante el ajuste de los valores CSS que se agregan a la sección "< head >" de tu página. Por ejemplo, puede cambiar el color de la calculadora mediante el ajuste del "fondo-color: #cccccc;" propiedad.