js 实现的计算器

在这里插入图片描述
一、HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="hw5">
		<meta name="author" content="le">
		<title>221600219_hw5</title>
		<link rel="stylesheet" type="text/css" href="./test.css" charset="utf-8">
		<script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="./test.js" charset="utf-8"></script>
	</head>
	<body>
		<hr />
		<h1>（1）一个JavaScript 计算器</h1>
		<hr />

		<form id="calculator" action="">
			<p>
				<input type="text" name="box" value="" id="result" disabled="disabled" />
			</p>
			<p id="bce">
				<input type="button" value="del" id="backspace" />
				<input type="button" value="CE" id="CE" />
				<input type="button" value="C" id="C" />
				<input type="button" value="(" id="le" />
				<input type="button" value=")" id="ri" />
			</p>
			<p id="nums">
				<input type="button" value="7" id="num7" />
				<input type="button" value="8" id="num8" />
				<input type="button" value="9" id="num9" />

				<br/>

				<input type="button" value="4" id="num4" />
				<input type="button" value="5" id="num5" />
				<input type="button" value="6" id="num6" />

				<br />

				<input type="button" value="1" id="num1" />
				<input type="button" value="2" id="num2" />
				<input type="button" value="3" id="num3" />

				<br />

				<input type="button" value="0" id="num0" />
				<input type="button" value="%" id="mod" />
				<input type="button" value="." id="point" />
			</p>
			<p id="operation">
				<input type="button" value="+" id="add" />
				<input type="button" value="-" id="sub" />
				<input type="button" value="*" id="mul" />
				<input type="button" value="/" id="div" />
			</p>
			<p id="get-result">
				<input type="button" value=" sin " id="sin" />
				<input type="button" value=" cos " id="cos" />
				<input type="button" value=" tan " id="tan" />
				<input type="button" value=" ln  " id="ln" />

				<br />

				<input type="button" value=" 2²" id="square" />
				<input type="button" value=" √ " id="sqrt" />
				<input type="button" value="1/x" id="recip" />
				<input type="button" value=" = " id="calculate" />
			</p>

		</form>

		<hr />
	</body>
</html>

二、CSS

body{
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0;
}

/*

	计算器：

 */
#calculator{
	width: 620px;
	margin: 0 auto;
}
#calculator input{
	font-size: 20px;
	padding: 25px;
}
#result{
	width: 560px;
}
#bce input{
	width: 118px;
}
#nums input{
	width: 200px;
}
#operation input{
	width: 150px;
}
#get-result input{
	width: 150px;
}

三、js

$(document).ready(function(){
	load1()
})

var result = ""
var str = ""
function load1(){
	//实现计算器事件监听
	bceIt()
	addIt()
	showResult()
}
function bceIt(){
	$("#backspace").click(function(){
		str = $("#result").val().substr(0, str.length - 1)
		$("#result").val(str)
	})
	$("#CE").click(function(){
		$("#result").val("")
	})
	$("#C").click(function(){
		$("#result").val("")
	})
}
function addIt(){
	var jqs = ["#le", "#ri", "#nums input", "#operation input"]
	for (i in jqs){
		$(jqs[i]).click(function(){
			str = $("#result").val() + $(this).val()
			$("#result").val(str)
		})
	}
}
function showResult(){
	$("#get-result input").click(function(){
		var type = $(this).attr("id")
		try{
			result = eval(str)
		}catch(e){
			alert("请按正确格式输入运算！")
		}
		switch(type){
			case "sin":
				result = Math.sin(result)
				break
			case "cos":
				result = Math.cos(result)
				break
			case "tan":
				result = Math.tan(result)
				break
			case "ln":
				result = Math.log(result)
				break
			case "square":
				result = Math.pow(result, 2)
				break
			case "sqrt":
				result = Math.sqrt(result)
				break
			case "recip":
				result = 1.0 / result
				break
		}
		str = result
		$("#result").val(str)
	})
}

猜你喜欢