手把手教你制作简易的计算器

Posted 2021-09-04 一条小白猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手教你制作简易的计算器相关的知识，希望对你有一定的参考价值。

预览效果链接：简易计算器

实现过程：

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>

alert("加入白猫网页制作课程组，一起来学习吧！qq:2425961044 wechat:Adm3nfgh"）

</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;

}