练手：JS计算器（第二版）

马黑黑

计算器

0

C

(

)

←

7

8

9

÷

4

5

6

×

1

2

3

－

0

.

%

＋

x²

x³

√

＝

马黑黑

代码：

1. <style>
   
2. #ma { margin: 50px auto 0; padding: 8px; width: fit-content; max-width: 256px; box-sizing: border-box; height: fit-content; border-radius: 10px; background: linear-gradient(to right bottom, #666,tan); box-shadow: 2px 4px 8px black; }
   
3. #calcMsg, #calcRes { padding: 6px; color: #eee; font-size: 18px; word-break: break-all; }
   
4. #calcRes { text-align: right; color: #000; font-size: 20px; background: #eee; }
   
5. #calc { display: grid; place-items: center; grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(5, 50px); }
   
6. .btn, .clear { width: 40px; height: 40px; border-radius: 50%; background: #aaa; box-shadow: inset 0 0 10px #000; font: normal 20px/40px sans-serif; text-align: center; user-select: none; cursor: pointer; }
   
7. .btn:hover, .clear:hover { background: #ccc; }
   
8. .num { color: darkred; font-weight: bold; }
   
9. </style>
   
10. 
    
11. <div id="ma">
    
12.         <div id="calcMsg">计算器</div>
    
13.         <div id="calcRes">0</div>
    
14.         <div id="calc">
    
15.                 <div class="clear" id="clear">C</div>
    
16.                 <div class="btn" data-idx="(">(</div>
    
17.                 <div class="btn" data-idx=")">)</div>
    
18.                 <div class="clear" id="del">←</div>
    
19.                 <div class="btn num" data-idx="7">7</div>
    
20.                 <div class="btn num" data-idx="8">8</div>
    
21.                 <div class="btn num" data-idx="9">9</div>
    
22.                 <div class="btn" data-idx="/">÷</div>
    
23.                 <div class="btn num" data-idx="4">4</div>
    
24.                 <div class="btn num" data-idx="5">5</div>
    
25.                 <div class="btn num" data-idx="6">6</div>
    
26.                 <div class="btn" data-idx="*">×</div>
    
27.                 <div class="btn num" data-idx="1">1</div>
    
28.                 <div class="btn num" data-idx="2">2</div>
    
29.                 <div class="btn num" data-idx="3">3</div>
    
30.                 <div class="btn num" data-idx="-">－</div>
    
31.                 <div class="btn num" data-idx="0">0</div>
    
32.                 <div class="btn" data-idx=".">.</div>
    
33.                 <div class="btn" id="percent">%</div>
    
34.                 <div class="btn" data-idx="+">＋</div>
    
35.                 <div class="clear" id="pow2">x&#178;</div>
    
36.                 <div class="clear" id="pow3">x&#179;</div>
    
37.                 <div class="clear" id="sqrt">√</div>
    
38.                 <div class="clear" id="equal" data-idx="=">＝</div>
    
39.         </div>
    
40. </div>
    
41.   
    
42. <script>
    
43. 
    
44. let btns = document.querySelectorAll('.btn'); /* 非id运算类按钮 */
    
45. 
    
46. /* 运算函数 */
    
47. let _eval = (fn) => new Function('return ' + fn)();
    
48. 
    
49. /* 处理运算结果 */
    
50. let calc = (str) => {
    
51.         let res;
    
52.         try {
    
53.                 res = _eval(str);
    
54.                 res = res == Infinity ? '∞' : num2Fixed(res);
    
55.         } catch(err) {
    
56.                 res = '算式非法';
    
57.         }
    
58.         return res;
    
59. };
    
60. 
    
61. /* 非id类按钮点击事件 */
    
62. btns.forEach(item => {
    
63.         item.onclick = () => {
    
64.                 if(calcRes.innerText === '0') {
    
65.                         if(item.dataset.idx === '0') {
    
66.                                 calcRes.innerText = '0';
    
67.                         }else{
    
68.                                 calcRes.innerText = isNaN(parseInt(item.dataset.idx)) ? '0' + item.dataset.idx : item.dataset.idx;
    
69.                         }
    
70.                 }else{
    
71.                         calcRes.innerText += item.dataset.idx;
    
72.                 }
    
73.                 calcMsg.innerText = calcRes.innerText;
    
74.         }
    
75. });
    
76. 
    
77. /* C按钮点击事件 */
    
78. clear.onclick = () => {
    
79.         calcMsg.innerText = '计算器';
    
80.         calcRes.innerText = '0';
    
81. };
    
82. 
    
83. /* =按钮点击事件 */
    
84. equal.onclick = () => {
    
85.         let result = calc(calcRes.innerText);
    
86.         if(result === '算式非法') {
    
87.                 calcMsg.innerText = result;
    
88.         }else{
    
89.                 calcRes.innerText = result;
    
90.         }
    
91.         if(calcMsg.innerText.lastIndexOf('=') < 0) calcMsg.innerText += '=';
    
92. };
    
93. 
    
94. /* ←按钮点击事件 */
    
95. del.onclick = () => {
    
96.         calcRes.innerText = calcRes.innerText.slice(0,-1) || 0;
    
97.         calcMsg.innerText = calcRes.innerText;
    
98. };
    
99. 
    
100. /* 开方&幂运算按钮点击事件 */
     
101. [pow2,pow3,sqrt].forEach(elm => {
     
102.         elm.onclick = () => {
     
103.                 let str = calcRes.innerText;
     
104.                 switch (elm.id) {
     
105.                         case 'pow2':
     
106.                                 calcRes.innerText = sq_pow(str,'pow','2');
     
107.                                 calcMsg.innerText = `${str}&#178;`;
     
108.                                 break;
     
109.                         case 'pow3':
     
110.                                 calcRes.innerText = sq_pow(str,'pow','3');
     
111.                                 calcMsg.innerText = `${str}&#179;=`;
     
112.                                 break;
     
113.                         default:
     
114.                                 calcRes.innerText = sq_pow(str,'sqrt');
     
115.                                 calcMsg.innerText = calcRes.innerText.replace('Math.sqrt','√');
     
116.                 };
     
117.         };
     
118. });
     
119. 
     
120. /* %按钮点击事件*/
     
121. percent.onclick = () => {
     
122.         let num = calcRes.innerText;
     
123.         calcRes.innerText = _eval(num/100);
     
124.         calcMsg.innerText = num + '/100=';
     
125. };
     
126. 
     
127. /* 处理JS浮点数运算bug问题 */
     
128. let num2Fixed = (res) => {
     
129.         let str = typeof(res) === 'number' ? res.toString() : res;
     
130.         let ar = str.split('.');
     
131.         /* 如果有小数点，需要排除科学计数小数点 */
     
132.         if(ar.length <= 1 || str.indexOf('e') > -1) return res;
     
133.         if(ar[1].length >= 14) str = str.slice(0,-1);
     
134.         return parseFloat(str);
     
135. };
     
136. 
     
137. /* 幂&开方运算 */
     
138. let sq_pow = (str,operator,arg='') => {
     
139.         operator = 'Math.' + operator;
     
140.         let regex = /(\([0-9\+\-\*\/]+\))$|(\d+(\.\d+)?)$/g;
     
141.         if(regex.test(str)) {
     
142.                 strRes = str.match(regex)[0];
     
143.                 str = str.replace(regex, arg ? `${operator}(${strRes},${arg})` : `${operator}(${strRes})`);
     
144.         }
     
145.         return str;
     
146. };
     
147. 
     
148. </script>

复制代码

马黑黑

第二版相较于第一版，基于表达式（算式）的运算理念得以进一步落实。例如，四则运算中，将幂运算、平方运算纳入其中，只要算式合法，计算器均能操作。

同时解决一些已经发现的细节逻辑等若干问题。

肯定还会存在其他问题，后续再做修正。

起个网名好难

评分和第一版一样，另外
   

期待第三版。

马黑黑

醉美水芙蓉 发表于 2024-1-3 07:12
黑黑老师厉害，发明了计算机！

肿么可能？

计算器，练练手而已

马黑黑

起个网名好难 发表于 2024-1-3 08:19
评分和第一版一样，另外
   

未对评分机制导致的问题做考虑，现在的精力是处理具体的运算问题以及代码基于运算、操作逻辑等问题。感谢支持。

起个网名好难

马黑黑 发表于 2024-1-3 08:30
未对评分机制导致的问题做考虑，现在的精力是处理具体的运算问题以及代码基于运算、操作逻辑等问题。感谢 ...

用一对{}把代码包住评分就好了，不一定需要  (function() { ... })();

马黑黑

起个网名好难 发表于 2024-1-3 10:28
用一对{}把代码包住评分就好了，不一定需要  (function() { ... })();

这个方法挺奇葩

红影

黑黑把正则运算在这个帖子里做了完美的运用，很赞的钻研精神

红影

这么短的时间已经有了新版本的更新，厉害

红影

不但功能做了改进，连界面也变得更漂亮了呢

马黑黑

红影 发表于 2024-1-3 12:30
不但功能做了改进，连界面也变得更漂亮了呢

还好还好

起个网名好难

马黑黑 发表于 2024-1-3 12:25
这个方法挺奇葩

奇葩吗？ let 的作用域是块，加上{}后就避免了let重复定义的问题。
从浏览器的调试信息中可以看到这个问题的原因

红影

马黑黑 发表于 2024-1-3 12:31
还好还好

对这个不熟，只能在黑黑的帖子里欣赏一下了

马黑黑

红影 发表于 2024-1-3 15:39
对这个不熟，只能在黑黑的帖子里欣赏一下了

计算器我倒是有一点点知道的，因为卖猪肉的关系

马黑黑

红影 发表于 2024-1-3 12:28
黑黑把正则运算在这个帖子里做了完美的运用，很赞的钻研精神

不用正则也是可以的，会啰嗦一点

马黑黑

起个网名好难 发表于 2024-1-3 13:14
奇葩吗？ let 的作用域是块，加上{}后就避免了let重复定义的问题。
从浏览器的调试信息中可以看到这个问 ...

嗯。我只是对 {} 的语义问题不解

起个网名好难

马黑黑 发表于 2024-1-3 16:31
嗯。我只是对 {} 的语义问题不解

就是定义个代码块，不知是否确切。

马黑黑

起个网名好难 发表于 2024-1-3 18:43
就是定义个代码块，不知是否确切。

应该是。只是，关于 {} 的官网文档，都没这个用法的。