简易html+css+js计算器
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="calculator.css" type="text/css">
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<title>calculator</title>
</head>
<body>
<div>
<table id="calculator">
<tr><p id="show">0</p></tr>
<tr>
<td><button id="7" value="7" onclick="calculateNum(7)">7</button></td>
<td><button id="8" value="8" onclick="calculateNum(8)">8</button></td>
<td><button id="9" value="9" onclick="calculateNum(9)">9</button></td>
<td><button id="+" value="+" onclick="calculateOperator('+')">+</button></td>
</tr>
<tr>
<td><button id="4" value="4" onclick="calculateNum(4)">4</button></td>
<td><button id="5" value="5" onclick="calculateNum(5)">5</button></td>
<td><button id="6" value="6" onclick="calculateNum(6)">6</button></td>
<td><button id="-" value="-" onclick="calculateOperator('-')">-</button></td>
</tr>
<tr>
<td><button id="1" value="1" onclick="calculateNum(1)">1</button></td>
<td><button id="2" value="2" onclick="calculateNum(2)">2</button></td>
<td><button id="3" value="3" onclick="calculateNum(3)">3</button></td>
<td><button id="*" value="*" onclick="calculateOperator('*')">*</button></td>
</tr>
<tr>
<td colspan="2"><button id="0" value="0" onclick="calculateNum(0)">0</button></td>
<td><button id="." value="." onclick="calculateNum('.')">.</button></td>
<td><button id="/" value="/" onclick="calculateOperator('/')">/</button></td>
</tr>
<tr>
<td colspan="2"><button id="del" value="del" onclick="calculateDel()">Del</button></td>
<td colspan="1"><button id="clear" value="clear" onclick="calculateClear()">C</button></td>
<td colspan="1"><button id="=" onclick="calculateResult()">=</button></td>
</tr>
</table>
</div>
<script src="calculator.js"></script>
</body>
</html>CSS
div{
margin: 0 auto;
width: 25%;
height: 300px;
}
#calculator{
width: 100%;
height: 100%;
}
button{
width: 100%;
height: 100%;
}
p{
text-align: right;
font-size: 50px;
}JavaScript
var str = '';
var state =0;
var $show = $("#show");
function calculateNum(num) {
switch(state) {
case 0://未开始任何操作状态
if(num!=0&&num!='.'){
$show.html(num);
str += num;
state = 1;
}
else if(num=='.'){
$show.append(num);
str += num;
state = 1;
}
break;
case 1://输入数字中状态
if($show.html().indexOf(".")==-1||num!='.'){
$show.append(num);
str += num;
}
break;
case 2://输入运算符状态
$show.html(num);
str += num;
state=1;
break;
default:
alert("计算状态出错！");
break;
}
}
function calculateOperator(ope) {
if(state!=2&&state!=0) {
$show.html(eval(str));
str=$show.html();
str += ope;
state = 2;
}
}
function calculateDel() {
if(state==1&&$show!=""){
$show.html($show.html().substring(0,$show.html().length-1));
str=str.substring(0,str.length-1);
}
if($show.html()=="")
{
$show.html("0");
}
}
function calculateResult() {
$show.html(eval(str));
state=0;
str = "";
}
function calculateClear() {
state = 0;
str = "";
$show.html("0");
}效果图
心得体会
本来早就该写个计算器练练手的，因为各种原因一直拖着。真正写起来连怎么居中都不知道。使用了margin： 0 auto解决了居中的问题。在解决不能重复输入小数点上，百度了很多坑爹的东西，花了些时间，最后用$show.html().indexOf(".")==-1 来判断显示器上是否已经存在小数点。学会了将jQuery对象缓存起来var $show = $("#show") 以提高效率。收获挺大，算是把东西都稍微串起来，希望以后继续努力吧。