簡易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") 以提高效率。收穫挺大，算是把東西都稍微串起來，希望以後繼續努力吧。