手把手教你制作简易的计算器
预览效果链接：
实现过程：
HTML+Css+JS
具体通过<table>标签实现计算器整个的框架
通过Css样式实现计算器页面布局及框架优化
通过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="//music.163.com/outchain/player?type=2&id=1831772231&auto=1&height=0"></iframe> <script> </script> ---------------------------------------------------------------------------------------------------------------------- 访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。除此以外，将本网站任何内容或服务用于其他用途时，须征得本网站及相关权利人的书面许可，并支付报酬。
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;
}
效果预览：
背景图片：
今天就到这了，感谢支持！
联系方式：