姓名：張立斐 ? 學號：19020700001? ?學院：電子工程學院?
轉自：https://blog.csdn.net/kai112100/article/details/119535390
【嵌牛導讀】手把手教你制作簡易的計算器
【嵌牛鼻子】HTML Css JS
【嵌牛提問】如何使用HTML、Css和JS制作簡易的計算器？
【嵌牛正文】
預覽效果鏈接：簡易計算器
實現過程：
HTML+Css+JS
具體通過<table>標簽實現計算器整個的框架
通過Css樣式實現計算器頁面布局及框架優(yōu)化
通過JavaScript+算法實現計算器計算過程
次實驗過程：
背景圖片+背景音樂（看個人意愿加！）
安排：
HTML：
<link href="計算器.css" rel="stylesheet"? type="text/css" />
<script src="計算器.js"></script>
<body background="5-121106095005.gif"
</body>
<h2><p align="center">此工具由一條小白貓制作完成!</p></h2>
<table id="calculater" onClick="calculater()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey"? id="deletesign"><a href="計算器.html" class="item">歸零</a></td>?
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality" οnclick="resultscalcaulte()">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >9</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>? ? ? ? ? ?
</tr>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="http://music.163.com/outchain/player?type=2&id=1831772231&auto=1&height=0"></iframe>
<script>
alert("加入白貓網頁制作課程組，一起來學習吧！qq:2425961044 wechat:Adm3nfgh"）
</script>
----------------------------------------------------------------------------------------------------------------------
訪問者可將本網站提供的內容或服務用于個人學習、研究或欣賞，以及其他非商業(yè)性或非盈利性用途，但同時應遵守著作權法及其他相關法律的規(guī)定，不得侵犯本網站及相關權利人的合法權利。除此以外，將本網站任何內容或服務用于其他用途時，須征得本網站及相關權利人的書面許可，并支付報酬。
Css樣式：
*{
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: 黑體;
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: 黑體;
}
#equality{
cursor: pointer;
width: 40px;
height: 100%;
background: #2371D3;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-weight: bold;
font-family: 黑體;
}
.numberkey:hover{
background: #EA6F30;
}
#equality:hover{
background: #EA6F30;
}
JavaScript腳本：
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;
}
效果預覽：
版權聲明：本文為CSDN博主「一條小白貓」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/kai112100/article/details/119535390
