Usa HTML, CSS, JavaScript para hacer una calculadora
Los pasos generales:
use la etiqueta de entrada para configurar dos líneas de lectura digital, luego use la entrada para configurar cuatro botones y use el atributo onclick para importar el evento cuando se hace clic en el botón.
Sin más preámbulos, ¡pon el código! ! ! ! ! ! ! !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
function f(type) {
var inputnum1=jQuery("#num1");
var inputnum2=jQuery("#num2");
if(type==1||type==2||type==3){
if(inputnum1.val().trim()==""||inputnum2.val().trim()==""){
alert("输入不能为空!");
return false;
}else{
var end;
if(type==1){
end=parseInt(inputnum1.val())+parseInt(inputnum2.val());
}else if(type==2){
end=parseInt(inputnum1.val())-parseInt(inputnum2.val());
}else{
end=parseInt(inputnum1.val())*parseInt(inputnum2.val());
}
var jj=jQuery("#result");
jj.html("<p style='background-color: lightsteelblue'>最终结果为:<strong style='color: red'>"+end+"</strong></p>");
}
}else{
if(confirm("是否清空？")){
inputnum1.val("");
inputnum2.val("");
alert("清空完毕");
}
}
}
</script>
</head>
<body>
<p style="text-align: center;font-size:25px"><strong> 计算器 </strong></p>
<div style="text-align:center;background-color: lightsteelblue">
数字1:<input id="num1" type="number"><p></p>
数字2:<input id="num2" type="number"><p></p>
<input type="button" value="相加" onclick="f(1)"> <input type="button" value="相减" onclick="f(2)">
<input type="button" value="相乘" onclick="f(3)"> <input type="button" value="清空" onclick="f(4)"><p></p>
<div id="result"></div>
</div>
</body>
</html>
resultado de la operación:
Las siguientes explicaciones se dividen en bloques:
<script src="jquery-1.9.1.min.js"></script>
<script>
function f(type) {
var inputnum1=jQuery("#num1");
var inputnum2=jQuery("#num2");
if(type==1||type==2||type==3){
if(inputnum1.val().trim()==""||inputnum2.val().trim()==""){
alert("输入不能为空!");
return false;
}else{
var end;
if(type==1){
end=parseInt(inputnum1.val())+parseInt(inputnum2.val());
}else if(type==2){
end=parseInt(inputnum1.val())-parseInt(inputnum2.val());
}else{
end=parseInt(inputnum1.val())*parseInt(inputnum2.val());
}
var jj=jQuery("#result");
jj.html("<p style='background-color: lightsteelblue'>最终结果为:<strong style='color: red'>"+end+"</strong></p>");
}
}else{
if(confirm("是否清空？")){
inputnum1.val("");
inputnum2.val("");
jQuery("#result").html("");
alert("清空完毕");
}
}
}
</script>
Esta parte es la parte de operación de JS. Utiliza diferentes parámetros pasados para realizar diferentes funciones. ¿Cuáles son los parámetros pasados?
Es equivalente a vincular un número a cada botón, y este número es el tipo de parámetro aquí;
¿cómo obtener el número de entrada a través de jQuery?
Cada entrada tiene dos atributos: id y name. Podemos usar jQuery para obtener el id o el nombre correspondiente, y luego podemos continuar.
La alerta es una función de mensaje emergente. Por ejemplo, si agrego números sin ingresar un número, aparecerá uno:
El valor de retorno de confirm es un tipo booleano, que también es una ventana emergente. La diferencia es que tiene dos opciones: Por ejemplo, hago clic para borrar:
<body>
<p style="text-align: center;font-size:25px"><strong> 计算器 </strong></p>
<div style="text-align:center;background-color: lightsteelblue">
数字1:<input id="num1" type="number"><p></p>
数字2:<input id="num2" type="number"><p></p>
<input type="button" value="相加" onclick="f(1)"> <input type="button" value="相减" onclick="f(2)">
<input type="button" value="相乘" onclick="f(3)"> <input type="button" value="清空" onclick="f(4)"><p></p>
<div id="result"></div>
</div>
</body>
style = "text-align: center; font-size: 25px": establece el tamaño de fuente y el centro;
background-color: lightsteelblue ": establece el color de fondo ;:
equivalente a espacios; (porque simplemente escribiendo espacios para ajustar el espaciado, predeterminado Solo puede haber un espacio, y no importa cuántos hits, solo puede ser un efecto);
type = "button": establece la función como un botón;
id = "num1": el atributo que será capturado por jQuery como mencionado anteriormente;
οnclick = “f (4)": clic del mouse para operar el atributo;
OK, lo anterior es la producción de una calculadora simple, si crees que no está mal, simplemente así.