Use HTML, CSS, JavaScript to make a calculator
The overall steps:
use the input tag to set two digital read-in lines, then use the input to set four buttons, and use the onclick attribute to import events when the button is clicked.
Without further ado, put the code! ! ! ! ! ! ! !
<!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>
operation result:
The following explanations are divided into blocks:
<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>
This part is the operation part of JS. It uses different parameters passed in to perform different functions. What are the parameters passed in?
It is equivalent to binding a number to each button, and this number is the parameter type here;
how to get the input number through jQuery?
Each input has two attributes: id and name. We can use jQuery to grab the corresponding id or name, and then we can proceed further.
Alert is a pop-up prompt function. For example, if I add numbers without entering a number, it will prompt one:
The return value of confirm is a Boolean type, which is also a pop-up window. The difference is that it has two options: For example, I click to clear:
<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": set the font size and center;
background-color: lightsteelblue": set the background color;:
equivalent to a space; (because simply type the space to adjust the interval, the default There can only be one space, no matter how many hits, it can only be one effect);
type="button": set the function as a button;
id="num1": the attribute to be captured by jQuery as mentioned above;
οnclick="f( 4)": mouse click to operate the attribute;
OK, the above is the production of a simple calculator, if you think it is not bad, just like it.