如何用css js制作计算器？ 如何用js做出计算器？

\u5982\u4f55\u7528javascript\u505a\u4e00\u4e2a\u8ba1\u7b97\u5668

\u9996\u5148\u6211\u4eec\u8981\u505a\u597d\u4e00\u4e2a\u8ba1\u7b97\u5668\u7684\u754c\u9762\uff0c\u4e3b\u8981\u7528\u5230html\u4e0ecss\u7684\u77e5\u8bc6\uff0c\u4e0b\u9762\u662f\u4ee3\u7801


0


1
2
3
+
c


4
5
6
-
=


7
8
7
*


+/-
0
.
/


\u4e0a\u9762\u8bbe\u7f6e\u4e00\u4e2a\u7b80\u5355\u7684table\u8868\u683c\uff0c\u4e3b\u8981\u5185\u5bb9\u662f\u8ba1\u7b97\u5668\u7684\u6570\u5b57\u952e\u76d8\u548c\u7b26\u53f7\uff0c\u8fd8\u6709\u5c31\u662fclass\u540d\u548cID\u540d\uff0c\u51fd\u6570\u540d\uff0c\u4e3b\u8981\u662f\u7528\u4f5ccss\u6837\u5f0f\u8bbe\u8ba1\u548cjavascript\u7a0b\u5e8f\u8bbe\u8ba1\uff0c\u540e\u9762\u4f1a\u7528\u5230\uff0c\u5c31\u5148\u8d34\u51fa\u6765\u4e86

colspan="5" \u662f\u5408\u5e76\u4e94\u5217\u7684\u610f\u601d\uff0c\u8868\u793a\u8fd9\u4e2a\u5355\u5143\u683c\u8981\u5360\u4e94\u5217
rowspan="3"\u662f\u5408\u5e76\u4e09\u884c\u7684\u610f\u601d\uff0c\u8868\u793a\u8fd9\u4e2a\u5355\u5143\u683c\u8981\u5360\u4e09\u884c

\u6548\u679c\u5982\u4e0b\uff0c\u8fd9\u6837\u4e00\u4e2a\u7b80\u5355\u7684\u67b6\u6784\u5c31\u5b8c\u6210\u4e86

\u63a5\u4e0b\u6765\u5c31\u662fcss\u7684\u8bbe\u8ba1\uff0c\u4e0b\u9762\u662f\u4ee3\u7801
*{
padding:0;
margin:1px;
}
#calculater{
margin: auto;
margin-top: 30px;
border: solid 6px #2371D3;
border-spacing: 0px;
}
#display{
width: 100%;
height: 30px;
border-bottom: solid 4px #2371D3;
font-weight: bold;
color: #193D83;
font-family: \u9ed1\u4f53;
padding-left: 2px;

}
.numberkey{
cursor: pointer;
width: 40px;
height: 30px;
border: solid 1px #FFFFFF;
background: #2371D3;
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: \u9ed1\u4f53;
}

#equality{
cursor: pointer;
width: 40px;
height: 100%;
background: #2371D3;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: \u9ed1\u4f53;
}

.numberkey:hover{
background: #EA6F30;
}
#equality:hover{
background: #EA6F30;
}

\u4ee5\u4e0a\u662fcss\u4ee3\u7801\uff0c\u6bd4\u8f83\u7b80\u5355

border-spacing: 0px;
\u8fd9\u91cc\u4ee3\u7801\u7684\u610f\u4e49\u662f\uff1atable\u4e2d\u5355\u5143\u683c\u4e0e\u5355\u5143\u683c\uff0c\u8868\u683c\u8fb9\u7f18\u90fd\u6709\u9ed8\u8ba4\u8ddd\u79bb\uff0c\u8fd9\u91ccborder-spacing: 0px;\u80fd\u4f7f\u5176\u9ed8\u8ba4\u8ddd\u79bb\u4e3a\u96f6\uff0c\u6ca1\u6709\u8fd9\u53e5\u4f1a\u6bd4\u8f83\u96be\u8bbe\u8ba1\u597d\u770b\u7684\u6837\u5f0f\u3002
cursor: pointer;
\u8fd9\u91cc\u4ee3\u7801\u7684\u610f\u4e49\u662f\uff1a\u4f7f\u9f20\u6807\u653e\u5728\u4e0a\u9762\u65f6\u53d8\u6210\u4e00\u4e2a\u624b\u7684\u6807\u5fd7

\u6548\u679c\u5982\u4e0b

\u63a5\u4e0b\u6765\u662fjavascript\u7684\u4ee3\u7801\uff0c\u6309\u7167\u601d\u8def\u6765\u4e00\u70b9\u70b9\u5199
\u9996\u5148\u6211\u4eec\u8981\u8bbe\u8ba1\uff0c\u5f53\u9f20\u6807\u70b9\u51fb\u67d0\u4e2a\u5355\u5143\u683c\u65f6\u6211\u4eec\u80fd\u83b7\u53d6\u8fd9\u4e2a\u5355\u5143\u683c\u4e0a\u7684\u5185\u5bb9\uff0c\u5373\u6570\u5b57\u6216\u7b26\u53f7
\u6240\u4ee5\u6211\u4eec\u5728table\u6807\u7b7e\u91cc\u52a0\u4e0aonClick="calculater()"\uff0c\u6dfb\u52a0\u4e00\u4e2a\u70b9\u51fb\u4e8b\u4ef6
\u7136\u540e\u7528event.srcElement.innerText\u83b7\u53d6\u5355\u5143\u683c\u4e0a\u7684\u5185\u5bb9\uff0cevent\u662f\u4e8b\u4ef6\u7684\u610f\u601d\uff0c\u5728\u8fd9\u91cc\u8fd9\u4e2a\u4e8b\u4ef6\u5f53\u7136\u662f\u70b9\u51fb\u4e86\uff0csrcElement\u5c31\u662f\u4e8b\u4ef6\u7684\u5143\u7d20\uff0c\u5728\u8fd9\u91cc\u662f\u88ab\u70b9\u51fb\u7684\u5355\u5143\u683c\uff0cinnerText\u662f\u83b7\u53d6\u8fd9\u4e2a\u5355\u5143\u683c\u7684\u5185\u5bb9\u3002
\u8fd9\u91cc\u6211\u4eec\u5c31\u53ef\u4ee5\u5199\u51fa\u8fd9\u4e2a\u51fd\u6570\u7b2c\u4e00\u884c\u4ee3\u7801\uff0c\u83b7\u53d6\u88ab\u70b9\u51fb\u7684\u5355\u5143\u683c\u7684\u5185\u5bb9
function calculater(){
results=event.srcElement.innerText;
}
results\u5c31\u662f\u5355\u5143\u683c\u7684\u5185\u5bb9
\u5f53\u7136\u83b7\u53d6\u4e86\u4ec0\u4e48\u8981\u663e\u793a\u5728\u7b2c\u4e00\u4e2a\u5355\u5143\u683c\u90a3\u91cc\uff0c\u8fd9\u91cc\u6211\u4eec\u8fd8\u662f\u7528innerText\uff0c\u6765\u8f93\u51fa\u8fd9\u4e2a\u70b9\u51fb\u7684\u503c
display.innerText=results;
\u8fd9\u91cc\u4ee3\u7801\u7684\u610f\u4e49\u662f\uff1adisplay\u662f\u7b2c\u4e00\u683c\u5355\u5143\u683c\u7684id,\u5c31\u662f\u5728\u7b2c\u4e00\u884c\u663e\u793a\u4f60\u70b9\u51fb\u4e86\u4ec0\u4e48
calculater()\u7684\u4ee3\u7801\u5c31\u53d8\u6210\u8fd9\u6837
function calculater(){
results=event.srcElement.innerText;
display.innerText=results;
}
\u8fd9\u6837\u6211\u4eec\u5c31\u80fd\u8f93\u51fa\u6211\u4eec\u70b9\u51fb\u7684\u5355\u5143\u683c\u5185\u5bb9

\u4f46\u8fd9\u6837\u6211\u4eec\u53ea\u80fd\u8f93\u51fa\u4e00\u6b21\u5355\u51fb\u7684\u5185\u5bb9\uff0c\u4e3a\u4e86\u628a\u5185\u5bb9\u4e32\u8d77\u6765\uff0c\u6211\u4eec\u628a\u4ee3\u7801\u6539\u4e3a
var results="";
function calculater(){
results+=event.srcElement.innerText;
display.innerText=results;
}
\u8bbe\u7f6eresults\u4e3a\u5168\u5c40\u53d8\u91cf\uff0cevent.srcElement.innerText\u7528+=\u7d2f\u52a0\u8fdbresults\uff0c
\u8fd9\u6837\u6211\u4eec\u5c31\u80fd\u8f93\u5165\u5e76\u663e\u793a\u4e00\u6761\u7b97\u5f0f

\u6211\u4eec\u5728\u201c=\u201d\u5355\u5143\u683c\u6807\u7b7e\u91cc\u52a0\u4e0aonClick="resultscalcaulte()"\uff0c\u8ba1\u7b97\u8fd9\u4e2a\u7ed3\u679c
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
eval();\u80fd\u8fd0\u884c\u62ec\u53f7\u91cc\u7684javascript\u8bed\u53e5\u7684\u5b57\u7b26\u4e32\uff0c\u5e76\u8fd4\u56de\u5176\u503c\uff0c\u5982\u679cresults\u7b49\u4e8e7+8\uff0c\u90a3eval\u5c31\u4f1a\u8ba1\u7b977+8\uff0c\u5e76\u8fd4\u56de56\uff0c\u7136\u540e\u540e\u9762\u4e00\u6761\u4ee3\u7801\u628a56\u663e\u793a\u51fa\u6765
\u52a0\u5165\u4e0a\u9762\u7684\u8fd0\u7b97\u540e\uff0c\u8fd8\u662f\u65e0\u6cd5\u663e\u793a\u7ed3\u679c\uff0c\u539f\u56e0\u662f\u70b9\u51fb\u201c=\u201d\u5355\u5143\u683c\u4f1a\u5148\u89e6\u53d1resultscalcaulte()\u51fd\u6570\uff0c\u518d\u89e6\u53d1calculater()\u51fd\u6570\uff0c\u6240\u4ee5\u6211\u4eec\u5728resultscalcaulte()\u5f97\u5230\u7684\u7ed3\u679c\u5c31\u88abcalculater()\u7684\u7ed3\u679c\u8986\u76d6\u4e86\uff0c\u6211\u4eec\u9700\u8981\u518d\u5728calculater()\u91cc\u52a0\u4e0a
if (event.srcElement.innerText=="=") {
return;
}
\u4f7f\u70b9\u51fb\u201c=\u201d\u5355\u5143\u683c\u89e6\u53d1\u7684calculater()\u51fd\u6570\u5f97\u4e0d\u5230\u4efb\u4f55\u7ed3\u679c
\u6700\u540e\u5f97\u5230\u6700\u7b80\u5355\u7684\u8ba1\u7b97\u5668\u8fd0\u7b97\u4ee3\u7801
var results="";
var calresults="";
function calculater(){
if (event.srcElement.innerText=="=") {
return;
}
results+=event.srcElement.innerText;
display.innerText=results;
}
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
\u4e0b\u9762\u662f\u8ba1\u7b977*8\u7684\u7ed3\u679c

8
\u5f53\u7136\u8fd9\u6837\u7684\u8ba1\u7b97\u5e76\u6ca1\u6709\u4f7f\u7528\u4ef7\u503c\uff0c\u6211\u4eec\u5c06\u5728\u4e0b\u7bc7\u7ee7\u7eed\u5b8c\u5584\u8fd9\u4e2a\u8ba1\u7b97\u5668\u7684\u673a\u80fd

\u5982\u679c\u60a8\u6709\u8fd8\u539f\u8f6f\u4ef6\u6216\u81ea\u5e26\u7684\u8fd8\u539f\uff0c\u8fd8\u539f\u4e00\u4e0b\u7cfb\u7edf\u6709\u6548\u53c8\u7701\u4e8b\u3002
\u4f60\u60f3\u60f3\u51fa\u4e8b\u524d\u4f60\u662f\u600e\u4e48\u64cd\u4f5c\u7684\uff1f\u6545\u969c\u4e0d\u4f1a\u65e0\u7f18\u65e0\u6545\u7684\u51fa\u73b0\u5427\uff1f\u5c06\u51fa\u4e8b\u524d\u4e0b\u8f7d\u6240\u6709\u4e1c\u897f\u5168\u90e8\u5378\u8f7d\uff0c\u5728\u4e0d\u53ef\u4ee5\uff0c\u8fd8\u539f\u7cfb\u7edf\u6216\u91cd\u88c5\uff0c\u5982\u679c\u662f\u786c\u4ef6\u7684\u95ee\u9898\u5c31\u4fee\u4fee\u53bb\uff0c\u6709\u95ee\u9898\u8bf7\u4f60\u8ffd\u95ee\uff08\u5148\u770b\u770b\u4e0b\u9762\u7684\u65b9\u6cd5\uff09\u3002
\u7535\u8111\u65e0\u58f0\u7684\u89e3\u51b3\u65b9\u6cd5\uff1a\u6709\u4fee\u590d\u7cfb\u7edf\u548c\u7528\u8f6f\u4ef6\u5b89\u88c5\u58f0\u5361\u9a71\u52a8\u7684\u4e24\u79cd\u89e3\u51b3\u65b9\u6cd5\uff08\u9996\u5148\u770b\u770b\u5c0f\u5587\u53ed\u6216\u5728\u63a7\u5236\u9762\u677f\u4e2d\u770b\u770b\u662f\u5426\u8bbe\u7f6e\u4e86\u9759\u97f3\uff0c\u5728\u901a\u8fc7\u8033\u673a\u68c0\u67e5\u662f\u5426\u6709\u58f0\u97f3\u8f93\u51fa\uff0c\u5982\u679c\u6709\uff0c\u5219\u662f\u97f3\u7bb1\u6216\u5587\u53ed\u548c\u5404\u8fde\u7ebf\u7684\u6545\u969c\u5f15\u8d77\u7684\uff0c\u5728\u6709\u5c31\u662f\u58f0\u5361\u9a71\u52a8\u635f\u574f\u5f15\u8d77\u7684\uff0c\u5982\u679c\u662f\u8bf7\u60a8\u5b89\u88c5\u5408\u9002\u7684\u58f0\u5361\u9a71\u52a8\uff0c\u5982\u679c\u662f\u786c\u4ef6\u95ee\u9898\u5f15\u8d77\u7684\uff0c\u81ea\u5df1\u53c8\u89e3\u51b3\u4e0d\u4e86\uff0c\u5efa\u8bae\u68c0\u4fee\u4e00\u4e0b\u53bb\uff0c\u6709\u95ee\u9898\u8bf7\u4f60\u8ffd\u95ee\u6211\uff09
1\u3001\u5f00\u673a\u6309F8\u4e0d\u52a8\u5230\u9ad8\u7ea7\u9009\u9879\u51fa\u73b0\u5728\u677e\u624b\uff0c\u9009\u201c\u6700\u8fd1\u4e00\u6b21\u7684\u6b63\u786e\u914d\u7f6e\u201d\u56de\u8f66\u4fee\u590d\uff08\u8fd9\u4e2a\u65b9\u6cd5\u53ef\u4ee5\u6062\u590d\u539f\u6765\u7684\u9a71\u52a8\uff0c\u5982\u679c\u60a8\u7684\u7535\u8111\u662fWin8\uff0c\u8fdb\u4e0d\u4e86\u7cfb\u7edf\u662f\u8fdb\u4e0d\u4e86\u5b89\u5168\u6a21\u5f0f\u7684\uff0c\u53ea\u6709\u91cd\u88c5\u4e86\uff09\u3002
2\u3001\u5982\u679c\u662f\u56e0\u66f4\u65b0\u9a71\u52a8\u5f15\u8d77\u7684\u6545\u969c\uff0c\u53f3\u51fb\u6211\u7684\u7535\u8111\u9009\u5c5e\u6027\uff0c\u9009\u8bbe\u5907\u7ba1\u7406\u5668\u627e\u5230\u8fd9\u4e2a\u9a71\u52a8\u53f3\u952e\u9009\u5c5e\u6027/\u4e0a\u9762\u7684\u9a71\u52a8\u7a0b\u5e8f\u9009\u9879/\u9009\u4e0b\u9762\u8fd4\u56de\u9a71\u52a8\u7a0b\u5e8f\u9009\u9879\u6309\u786e\u5b9a\uff08\u5982\u679c\u53ef\u4ee5\u8fdb\u5165\u5b89\u5168\u6a21\u5f0f\uff0c\u4e5f\u662f\u5f00\u673a\u6309F8\uff09\u3002
3\u3001\u5982\u679c\u6545\u969c\u4f9d\u65e7\uff0c\u8fd8\u539f\u7cfb\u7edf\u6216\u91cd\u88c5\u3002
\u4f7f\u7528\u7cfb\u7edf\u81ea\u5e26\u7684\u7cfb\u7edf\u8fd8\u539f\u7684\u65b9\u6cd5\uff1a
\u7cfb\u7edf\u81ea\u5e26\u7684\u7cfb\u7edf\u8fd8\u539f\uff1a\u201c\u5f00\u59cb\u201d/\u201c\u7a0b\u5e8f\u201d/\u201c\u9644\u4ef6\u201d/\u201c\u7cfb\u7edf\u5de5\u5177\u201d/\u201c\u7cfb\u7edf\u8fd8\u539f\u201d\uff0c\u70b9\u9009\u201c\u6062\u590d\u6211\u7684\u8ba1\u7b97\u673a\u5230\u4e00\u4e2a\u8f83\u65e9\u7684\u65f6\u95f4\u201d\uff0c\u6309\u4e0b\u4e00\u6b65\uff0c\u4f60\u4f1a\u770b\u5230\u65e5\u671f\u9875\u9762\u6709\u6df1\u8272\u7684\u65e5\u671f\uff0c\u90a3\u5c31\u662f\u8fd8\u539f\u70b9\uff0c\u4f60\u9009\u62e9\u540e\uff0c\u70b9\u51fb\u4e0b\u4e00\u6b65\u8fd8\u539f\uff08Win78\u8fd8\u539f\u7cfb\u7edf\uff0c\u53f3\u51fb\u8ba1\u7b97\u673a\u9009\u5c5e\u6027\uff0c\u5728\u53f3\u4fa7\u9009\u7cfb\u7edf\u4fdd\u62a4\uff0c\u7cfb\u7edf\u8fd8\u539f\uff0c\u6309\u6b65\u9aa4\u505a\u5c31\u662f\u4e86\u3002\u5982\u679c\u6709\u8fd8\u539f\u8f6f\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u8fd8\u539f\u4fee\u590d\uff09\u3002

源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js加减乘除计算器代码</title>
<style>
body,ul{ margin:0px; padding:0px;}
body{ background:#AF6332}
li{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:after{ content:""; display:block;clear:both}
.clearfix{zoom:1;}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
ul{}
li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(/jscss/demoimg/201402/calBg) repeat-x; float:left; margin:12px 6px 0px;}
.one li{ height:44px; background:url(/jscss/demoimg/201402/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
.one .orange{ background:url(/jscss/demoimg/201402/calBg2.jpg) repeat-x; border:1px solid #875733;}
.one .black{ background:url(/jscss/demoimg/201402/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
.one .gray{ background:url(/jscss/demoimg/201402/calBg4.jpg) repeat-x; border:1px solid #5F6366;}
.zero{ width:160px;}
.one .deng{ background:url(/jscss/demoimg/201402/calBg5.jpg); height:100px;}
.twoBox{ width:353px; overflow:hidden; }
.two{ width:358px;}
.calBox .three { margin:0px}
.calu{ padding:0px 10px; width:470px;}
</style>
<script type="text/javascript">
function findArr(a,c){for(var b=0;b<a.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;c<e.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
var aNum=getClass(document,'num');
var oText=document.getElementById('text');
var aPer=getClass(document,'oper');
var oPer=document.getElementById('per');
var oText1=document.getElementById('text1');
var oDeng=getClass(document,'deng')[0];
var oSq=getClass(document,'sq')[0];
var oRec=getClass(document,'rec')[0];
var oZheng=getClass(document,'zheng')[0];
var oOn=getClass(document,'on')[0];
var oOff=getClass(document,'off')[0];
var oClea=getClass(document,'clea')[0];
var bOnOrOffClick=false;
function fnNum(a)
{
var bClear=false;
oText.value='0'
for(var i=0;i<aNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.value&&oText.value&&oText1.value=='')
{
oText1.value=oText.value;
oText.value='';
}
var re=/^0\.{1}\d+$/;
var re1=/^([0]\d+)$/;
oText.value+=this.innerHTML;
if(re.test(oText.value))
{
return;
}
if(re1.test(oText.value))
{
oText.value=this.innerHTML;
}
}
//符号部分的添加
for(var j=0;j<aPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.value&&oPer.value&&oText1.value)
{
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//点击等号的时候
oDeng.onclick=function()
{
//+-*/%的情况
if(oText1.value==''&&oPer.value==''&&oText.value=='')
{
return;
}
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
oPer.value='';
bClear=true;
}
//点击开根号的时候
oSq.onclick=function()
{
var m=Math.sqrt(oText.value);
oText.value=m;
}
//点击倒数的时候
oRec.onclick=function()
{
var a=1/oText.value;
if(oText.value=='0')
{
a='正无穷'
}
oText.value=a;
}
//正负号的时候
oZheng.onclick=function()
{
if(oText.value>0)
{
oText.value=-oText.value;
}
else
{
oText.value =-oText.value;
}
}
//清屏的时候
oClea.onclick=function()
{
oText.value='0';
oText1.value='';
oPer.value='';
}
}
}
//on时
oOn.onclick=function()
{
bOnOrOffClick=true;
fnNum(bOnOrOffClick);
}
//off时
oOff.onclick=function()
{
bOnOrOffClick=false;
fnNum(bOnOrOffClick);
oText.value='';
}
}
</script>
</head>
<body>
<div class="calBox">
<div class="calu">
<input type="text" id="text">
<ul class="one clearfix">
<li class="orange on">开机</li>
<li class="orange off">关机</li>
<li class="orange clea">清屏</li>
<li class="black zheng">+/-</li>
<li class="black rec">1/x</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="gray oper">/</li>
<li class="black oper">%</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="gray oper">*</li>
<li class="black sq">√</li>
<!-- -->
</ul>
<div class="clearfix">
<div class="twoBox fl">
<ul class="one fl two">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="gray oper">-</li>
<li class="zero num">0</li>
<li class="num">.</li>
<li class="gray oper">+</li>
</ul>
</div>
<ul class="one three clearfix fl">
<li class="black deng fl">=</li>
</ul>
</div>
</div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
<div style="text-align:center;clear:both">
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CALCULATOR </title>
<script type="text/javascript" language="javascript">

function calculator(obj){
//alert(isNaN(obj.value));
//alert(obj.value=="÷");
var num=document.getElementById("t").value;
//var firststr=num.charAt(0);
//alert(firststr!=''&&!isNaN(parseFloat(firststr)));
//if(!isNaN(parseFloat(firststr))){
var flag = true;
if(num.length==0){
if(!isNaN(parseInt(obj.value))){
document.getElementById("t").value =obj.value;
}
}else{

if(isNaN(parseFloat(obj.value))){
switch(obj.value){
case "÷":
document.getElementById("t").value +="/";
flag = false;
break;
case "×":
document.getElementById("t").value +="*";
flag = false;
break;
case "＋":
document.getElementById("t").value +="+";
flag = false;
break;
case "－":
document.getElementById("t").value +="-";
flag = false;
break;
case ".":
if(isNaN(parseFloat(num.value))){
document.getElementById("t").value +=".";
}
flag=false;
break;
default:
break;
}
}
if(flag){
var reg=/[\/\*\-\+]{2,}/;
if(obj.value=="="){
var v=document.getElementById("t").value;
if(reg.test(v)){
document.getElementById("t").value="";
}else{
document.getElementById("t").value=eval(document.getElementById("t").value);
}

}else{
document.getElementById("t").value +=obj.value;
}
}

}
}
function clr(){
document.getElementById("t").value="";
}
</script>
</head>

<body>
<div align="center">
<table id="t" border="1">
<caption>计算器</caption>
<tbody>
<tr><td colspan="4"><input id="t" type="text"/></td></tr>
<tr>
<td colspan="4" align="right">
<input type="button" value="清空" onclick =" clr(); "/>
</td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calculator(this);"/></td>
<td><input type="button" value="2" onclick="calculator(this);"/></td>
<td><input type="button" value="3" onclick="calculator(this);"/></td>
<td><input type="button" value="÷" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calculator(this);"/></td>
<td><input type="button" value="5" onclick="calculator(this);"/></td>
<td><input type="button" value="6" onclick="calculator(this);"/></td>
<td><input type="button" value="×" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="calculator(this);"/></td>
<td><input type="button" value="8" onclick="calculator(this);"/></td>
<td><input type="button" value="9" onclick="calculator(this);"/></td>
<td><input type="button" value="－" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="calculator(this);"/></td>
<td><input type="button" value="0" onclick="calculator(this);"/></td>
<td><input type="button" value="=" onclick="calculator(this);"/></td>
<td><input type="button" value="＋" onclick="calculator(this);"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是我写的一个计算器，你试一试，其他的你再自己改改，最近比较忙，没空帮你写完整的

自己网上去百度下：js计算器代码。

js计算器有现成的，界面要照你这个样子恐怕你求不到的，还规定不准用图片，纯css写这个界面还是要花不少时间的。

去codepen看看，我记得好像见过

扩展阅读：万能计算器 ... 网页计算器html+js+css ... 用js写一个完整的计算器 ... html加js制作简易计算器 ... c#制作简易计算器 ... html+css+js制作网站 ... js实现简易网页计算器 ... 全能计算器 ... htmlcssjs制作简单网页 ...