一、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)
})
}