利用HTML、CSS、JavaScript做一个计算器
整体步骤：
利用input标签设置两个数字读入行，再利用input设置四个按钮，利用onclick属性导入点击按钮时的事件。
二话不说，放代码！！！！！！！！
<!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>
运行结果：
下面分块解说：
<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>
这一部分是JS的操作部分，利用传进去的参数不同，执行不同的功能，那传进去的参数到底是什么呢？
相当于我给每个button绑定一个数字，而这个数字就是这里的参数type；
通过jQuery获取到输入的数字，怎么获取呢？
每一个input都有两个属性：id和name，我们通过jQuery抓取相应id或name，便可进行进一步操作。
alert是一个弹窗提示函数，比如我没有输入数字就相加，便会提示一个：
confirm的返回值是布尔类型，也是一个弹窗，差别是，它有两个选项：比如我点击清空：
<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”：设置字体大小，以及居中；
background-color: lightsteelblue"：设置背景颜色；
：等价于空格；（因为单纯的敲空格调间隔，默认只能有一个空格，敲再多也只能是一个的效果）；
type=“button”：设置功能为按钮；
id=“num1”：上面说的jQuery要抓取的属性；
οnclick=“f(4)”：鼠标点击操作属性；
好了，以上就是一个简单计算器的制作，如果觉得还不错就点个赞吧。