js实现简单的计算器

 	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="=" onclick="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;
}

js实现简单的计算器

猜你喜欢