让 Deepseek 写一个盘算器（网页）

完备代码 

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>简单计算器</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             display: flex;
12.             justify-content: center;
13.             align-items: center;
14.             height: 100vh;
15.             background-color: #f4f4f4;
16.         }
17.         .calculator {
18.             background-color: #fff;
19.             padding: 20px;
20.             border-radius: 10px;
21.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22.         }
23.         .calculator input[type="text"] {
24.             width: 100%;
25.             padding: 10px;
26.             margin-bottom: 10px;
27.             font-size: 18px;
28.             text-align: right;
29.             border: 1px solid #ccc;
30.             border-radius: 5px;
31.         }
32.         .calculator .buttons {
33.             display: grid;
34.             grid-template-columns: repeat(4, 1fr);
35.             gap: 10px;
36.         }
37.         .calculator .buttons button {
38.             padding: 20px;
39.             font-size: 18px;
40.             border: none;
41.             border-radius: 5px;
42.             background-color: #f1f1f1;
43.             cursor: pointer;
44.         }
45.         .calculator .buttons button:hover {
46.             background-color: #ddd;
47.         }
48.         .calculator .buttons button.operator {
49.             background-color: #ff9500;
50.             color: white;
51.         }
52.         .calculator .buttons button.operator:hover {
53.             background-color: #e08900;
54.         }
55.         .calculator .buttons button.equal {
56.             background-color: #34c759;
57.             color: white;
58.             grid-column: span 2;
59.         }
60.         .calculator .buttons button.equal:hover {
61.             background-color: #2da94f;
62.         }
63.     </style>
64. </head>
65. <body>
67. <div class="calculator">
68.     <input type="text" id="display" disabled>
69.     <div class="buttons">
70.         <button onclick="clearDisplay()">C</button>
71.         <button onclick="appendToDisplay('/')" class="operator">/</button>
72.         <button onclick="appendToDisplay('*')" class="operator">*</button>
73.         <button onclick="deleteLast()">DEL</button>
74.         <button onclick="appendToDisplay('7')">7</button>
75.         <button onclick="appendToDisplay('8')">8</button>
76.         <button onclick="appendToDisplay('9')">9</button>
77.         <button onclick="appendToDisplay('-')" class="operator">-</button>
78.         <button onclick="appendToDisplay('4')">4</button>
79.         <button onclick="appendToDisplay('5')">5</button>
80.         <button onclick="appendToDisplay('6')">6</button>
81.         <button onclick="appendToDisplay('+')" class="operator">+</button>
82.         <button onclick="appendToDisplay('1')">1</button>
83.         <button onclick="appendToDisplay('2')">2</button>
84.         <button onclick="appendToDisplay('3')">3</button>
85.         <button onclick="calculate()" class="equal">=</button>
86.         <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
87.         <button onclick="appendToDisplay('.')">.</button>
88.     </div>
89. </div>
91. <script>
92.     function appendToDisplay(value) {
93.         document.getElementById('display').value += value;
94.     }
96.     function clearDisplay() {
97.         document.getElementById('display').value = '';
98.     }
100.     function deleteLast() {
101.         let display = document.getElementById('display');
102.         display.value = display.value.slice(0, -1);
103.     }
105.     function calculate() {
106.         let display = document.getElementById('display');
107.         try {
108.             // 使用 eval 计算表达式，支持运算符优先级
109.             display.value = eval(display.value);
110.         } catch (e) {
111.             display.value = '错误';
112.         }
113.     }
114. </script>
116. </body>
117. </html>

复制代码

在今世生存中，盘算器是我们一样平常工作和学习中不可或缺的工具。无论是举行简单的加减乘除运算，照旧处理处罚复杂的数学表达式，盘算器都能资助我们快速得到效果。本文将先容怎样利用HTML、CSS和JavaScript创建一个简单的网页盘算器，并表明着实现原理。
1. 项目布局

这个简单的盘算器项目紧张由三部分构成：

•         HTML：用于构建盘算器的根本布局和布局。
  
•         CSS：用于美化盘算器的外貌，使其更加用户友好。
  
•         JavaScript：用于实现盘算器的逻辑功能，如输入、删除、清空和盘算等。
  

2. HTML布局

HTML部分界说了盘算器的根本布局。我们利用了一个<div>容器来包裹整个盘算器，并在此中放置了一个输入框和一个按钮网格。

2. <div class="calculator">
3.     <input type="text" id="display" disabled>
4.     <div class="buttons">
5.         <button onclick="clearDisplay()">C</button>
6.         <button onclick="appendToDisplay('/')" class="operator">/</button>
7.         <button onclick="appendToDisplay('*')" class="operator">*</button>
8.         <button onclick="deleteLast()">DEL</button>
9.         <button onclick="appendToDisplay('7')">7</button>
10.         <button onclick="appendToDisplay('8')">8</button>
11.         <button onclick="appendToDisplay('9')">9</button>
12.         <button onclick="appendToDisplay('-')" class="operator">-</button>
13.         <button onclick="appendToDisplay('4')">4</button>
14.         <button onclick="appendToDisplay('5')">5</button>
15.         <button onclick="appendToDisplay('6')">6</button>
16.         <button onclick="appendToDisplay('+')" class="operator">+</button>
17.         <button onclick="appendToDisplay('1')">1</button>
18.         <button onclick="appendToDisplay('2')">2</button>
19.         <button onclick="appendToDisplay('3')">3</button>
20.         <button onclick="calculate()" class="equal">=</button>
21.         <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
22.         <button onclick="appendToDisplay('.')">.</button>
23.     </div>
24. </div>

复制代码

•         输入框：<input type="text" id="display" disabled>用于表现用户输入和盘算效果。disabled属性确保用户不能直接通过键盘输入。
  
•         按钮：每个按钮都绑定了onclick事故，用于处理处罚用户的点击利用。按钮分为数字按钮、运算符按钮和功能按钮（如清空、删除、即是）。
  

3. CSS样式

CSS部分用于美化盘算器的外貌。我们利用了Flexbox布局来使盘算器在页面中居中表现，并利用Grid布局来分列按钮。

2. body {
3.     font-family: Arial, sans-serif;
4.     display: flex;
5.     justify-content: center;
6.     align-items: center;
7.     height: 100vh;
8.     background-color: #f4f4f4;
9. }
11. .calculator {
12.     background-color: #fff;
13.     padding: 20px;
14.     border-radius: 10px;
15.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16. }
18. .calculator input[type="text"] {
19.     width: 100%;
20.     padding: 10px;
21.     margin-bottom: 10px;
22.     font-size: 18px;
23.     text-align: right;
24.     border: 1px solid #ccc;
25.     border-radius: 5px;
26. }
28. .calculator .buttons {
29.     display: grid;
30.     grid-template-columns: repeat(4, 1fr);
31.     gap: 10px;
32. }
34. .calculator .buttons button {
35.     padding: 20px;
36.     font-size: 18px;
37.     border: none;
38.     border-radius: 5px;
39.     background-color: #f1f1f1;
40.     cursor: pointer;
41. }
43. .calculator .buttons button:hover {
44.     background-color: #ddd;
45. }
47. .calculator .buttons button.operator {
48.     background-color: #ff9500;
49.     color: white;
50. }
52. .calculator .buttons button.operator:hover {
53.     background-color: #e08900;
54. }
56. .calculator .buttons button.equal {
57.     background-color: #34c759;
58.     color: white;
59.     grid-column: span 2;
60. }
62. .calculator .buttons button.equal:hover {
63.     background-color: #2da94f;
64. }

复制代码

•         居中表现：通过display: flex和justify-content: center、align-items: center，我们将盘算器居中表现在页面上。
  
•         按钮布局：利用grid-template-columns: repeat(4, 1fr)将按钮分列成4列的网格布局。
  
•         按钮样式：差别范例的按钮（如运算符、即是按钮）有差别的配景颜色和悬停效果，以进步用户体验
  

4. JavaScript逻辑

JavaScript部分负责处理处罚盘算器的逻辑功能。我们界说了四个函数来实现盘算器的根本利用：

2. function appendToDisplay(value) {
3.     document.getElementById('display').value += value;
4. }
6. function clearDisplay() {
7.     document.getElementById('display').value = '';
8. }
10. function deleteLast() {
11.     let display = document.getElementById('display');
12.     display.value = display.value.slice(0, -1);
13. }
15. function calculate() {
16.     let display = document.getElementById('display');
17.     try {
18.         // 使用 eval 计算表达式，支持运算符优先级
19.         display.value = eval(display.value);
20.     } catch (e) {
21.         display.value = '错误';
22.     }
23. }

复制代码

•         appendToDisplay(value)：将用户点击的按钮值追加到输入框中。
  
•         clearDisplay()：清空输入框中的内容。
  
•         deleteLast()：删除输入框中的末了一个字符。
  
•         calculate()：利用eval()函数盘算输入框中的表达式，并将效果表现在输入框中。假如表达式无效，则表现“错误”。
  

5. 总结

通过这个简单的项目，我们学习了怎样利用HTML、CSS和JavaScript创建一个功能齐备的网页盘算器。这个盘算器不但支持根本的加减乘除运算，还具备清空、删除和错误处理处罚功能。固然这个盘算器相对简单，但它为我们提供了一个良好的出发点，可以在此底子上进一步扩展功能，如支持更复杂的数学运算、添加汗青记载等。
盼望这篇文章能资助你明白怎样构建一个简单的网页盘算器，并引发你对前端开辟的爱好！