文章目录
计算器
先上个效果图 :
（是不是有点眼熟？没错就是win10上的计算器）
原版的：
我的：
可以看出，还是有不少区别的，不仅仅是样式上，还有功能上。
（实在是懒得调了，功能的话有点小复杂就少些了几个…）
计算器的操作（运算）逻辑：
- 直接按数字、小数点、正负切换、等号、运算符……；
- 先按数字，再按小数点、正负切换、运算符、等号……；
- 先按数字，再按运算符，再按正负切换，再按等号；
例如：1+(-1)=0 - 先按数字，再按运算符，再按等号；
例如：1+=1 -> 1+1=2 - 先按数字，再按运算符，再按数字，再按等号；
例如：1+2=3 - 先按数字，再按运算符，再按数字，再按等号，再按数字……；
1. 先按数字，再按运算符，再按数字，再按等号，再按数字，再按运算符，再按数字，再按等号；例如：1+2=3 5+6=11
2. 先按数字，再按运算符，再按数字，再按等号，再按运算符，再按等号；
…
…
这东西不知道怎样去描述……所以只罗列了一部分情境……
（总的来说，现在看到的版本，已经是更新过（修复bug）数次后的成品。)
1. html
html:
<!DOCTYPE html>
<!-- 此处省略一部分标签 -->
<body>
<div class="body">
<!-- 计算器的头部 -->
<div class="top">
<!-- 1.顶部栏 -->
<span class="title">计算器</span>
<p>
<!-- 关闭计算器(页面) -->
<span class="close" onclick="window.close()">✕</span>
</p>
<!-- 2.内容栏 -->
<p>
<!-- 用作显示数字及结果的区域 -->
<span id="show" class="show-view">0</span>
</p>
</div>
<!-- 计算器的按钮 -->
<div class="content">
<!-- 第一行 + - * / -->
<p>
<span id="+" class="util symbol">+</span>
<span id="-" class="util symbol">-</span>
<span id="*" class="util symbol">*</span>
<span id="/" class="util symbol">/</span>
</p>
<!-- 第二行 7 8 9 % -->
<p>
<span id="7" class="number">7</span>
<span id="8" class="number">8</span>
<span id="9" class="number">9</span>
<span id="%" class="util symbol">%</span>
</p>
<!-- 第三行 4 5 6 <[X] -->
<p>
<span id="4" class="number">4</span>
<span id="5" class="number">5</span>
<span id="6" class="number">6</span>
<span id="Backspace" class="util">➨</span>
</p>
<!-- 第四行 1 2 3 C -->
<p>
<span id="1" class="number">1</span>
<span id="2" class="number"