js实现一个简单的计算器,有加减乘除的基本功能。
首先使用HTML写一个界面,需要三个文本框,包括两个输入框,一个输出框,输出框不能被操作,还需要一个选择框,用来选择运算符,最后还需要两个按钮,等于按钮以及清零按钮。
选择框使用标签select
输出按钮不能被操作则应使用属性disabled="true"
清零功能则使用reset,可以清零整个表单,不过对其他表单的内容没有影响
接着需要使用CSS调整样式,对整体进行美化,添加背景颜色,设置其长度和宽度
然后使用js实现其功能:先获得两个输入框的值以及选择框的运算符,将得到的输入框的值转为Number型,然后对其进行操作运算。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/com.css" />
</head>
<body>
<div id="computer">
<form>
<input id="text1" type="text" />
<select id="select">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input id="text2" type="text" />
<script type="text/javascript" src="js/com.js"></script>
<input id="button" type="button" value="=" οnclick="computer();"/>
<input id="text3" disabled="true" type="text" />
<input id="button1" type="reset" value="清零" />
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
#computer{
width: 700px;
height: 40px;
padding-top: 25px;
padding-left: 15px;
}
#computer input{
height: 30px;
width: 100px;
}
#button{
background-color:burlywood;
}
#button1{
background-color:burlywood;
margin-left: 50px;
}
#text1,#text2{
text-align: center;
background-color: beige;
}
#text3{
text-align: center;
background-color: aliceblue;
}
function computer(){
var text1 = document.getElementById("text1").value;
var text2 = document.getElementById("text2").value;
var select = document.getElementById("select").value;
// 将value转为数字Number()或parseInt()
var resu;
if(select=="+"){
resu = Number(text1) + Number(text2);
}else if(select=="-"){
resu = Number(text1) - Number(text2);
}else if(select=="*"){
resu = Number(text1) * Number(text2);
}else if(select=="/"){
resu = Number(text1) / Number(text2);
}
document.getElementById("text3").value=resu;
}