使用ChatGPT从零开始开发并成功运行的网页计算器！后端小白也能轻松搞定

烟雨平生

发布于 2023-09-05 11:28:47

2960

发布于 2023-09-05 11:28:47

文章被收录于专栏：数字化之路

（本文阅读时间：5分钟）

ChatGPT很擅长解决知识型问题，使用得当，就得到提效小帮手一枚。另外，与ChatGPT协作的过程中要有这个觉悟：不存在通过一次沟通就能解决问题的。

与ChatGPT沟通的一些技巧

1.1 ChatGPT不承诺正确性

ChatGPT不能保证给的回复都是正确的，只是按上下文信息生成ChatGPT认为合适的内容。就像我们人类在一块聊天一样，出现断片、自说自话或驴头不对马嘴的情况，也时有发生。

1.2 ChatGPT沟通的5个小技巧

1、给ChatGPT一个身份 可以对齐上下文，譬如，“你是一名资深的分布式系统软件架构师，是即时通讯的专家”

2、说明要让ChatGPT做的事情，给出参考。 譬如，“现在需要设计一个即时通讯系统，要求支持PC和手机两种终端，并且两个终端可以同时在线，参考仿照微信的功能，完成系统的需求分析，并输出一份功能需求文档，使用MarkDown格式输出”

3、提供背景信息，并提出明确的目标。 譬如，“当我的日活数达到100万级别后，我就需要使用微服务的架构了。请先给我一个模块拆分的设计方案”

4、明确输出格式：要求ChatGPT的输出格式。 譬如，“你给出的方案内容够了，需要表现层名字改为网关层，再输出一下IM系统的整体设计方案，按以下格式输出：”

5、给ChatGPT反馈，持续调教。 譬如“很好，初期我可以这么做”、“你给出的方案内容够了”

从0到1开发网页版计算器

2.1 给ChatGPT一个身份，说明要做的事，并指定输出的格式

下面是一个完整版的网页版计算器的设计和示例源码： HTML:

<!DOCTYPE html>
<html>
<head>
  <title>网页版计算器</title>
  <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" disabled>
    <div class="buttons">
      <button onclick="appendValue('7')">7</button>
      <button onclick="appendValue('8')">8</button>
      <button onclick="appendValue('9')">9</button>
      <button class="operator-button" onclick="appendValue('/')">÷</button>
      <button onclick="appendValue('4')">4</button>
      <button onclick="appendValue('5')">5</button>
      <button onclick="appendValue('6')">6</button>
      <button class="operator-button" onclick="appendValue('*')">×</button>
      <button onclick="appendValue('1')">1</button>
      <button onclick="appendValue('2')">2</button>
      <button onclick="appendValue('3')">3</button>
      <button class="operator-button" onclick="appendValue('-')">—</button>
      <button onclick="appendValue('0')">0</button>
      <button onclick="appendValue('.')">.</button>
      <button class="equal-button" onclick="calculate()">=</button>
      <button class="operator-button" onclick="appendValue('+')">+</button>
      <button onclick="clearDisplay()">C</button>
    </div>
  </div>

  <script src="calculator.js"></script>
</body>
</html>

CSS（calculator.css）

.calculator {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f5f5f7;
  font-family: "MiLanPro", Arial, sans-serif;
}

#display {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border: none;
  text-align: right;
  font-size: 28px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

button {
  width: 60px;
  height: 60px;
  margin: 5px;
  background-color: #f5f5f7;
  border: none;
  border-radius: 30px;
  font-size: 24px;
  color: #000;
}

.operator-button {
  background-color: #fd8d00;
  color: #fff;
}

.equal-button {
  background-color: #ff4040;
  color: #fff;
}

JavaScript（calculator.js）：

let display = document.getElementById("display");

function appendValue(value) {
  display.value += value;
}

function calculate() {
  let result;
  try {
    result = eval(display.value);
  } catch (error) {
    result = "Error";
  }
  display.value = result;
}

function clearDisplay() {
  display.value = "";
}

这个完整版的网页版计算器使用了与之前示例相似的HTML结构和CSS样式。 JavaScript代码中定义了点击事件处理程序来追加用户输入、执行计算以及清空显示区域。

你可以将HTML代码保存为一个名为 "calculator.html" 的文件，CSS代码保存为一个名为 "calculator.css" 的文件，JavaScript代码保存为一个名为 "calculator.js" 的文件。然后，将这些文件放在同一个目录下，并用浏览器打开 "calculator.html" 文件，就可以在浏览器中看到功能完备的网页版计算器了。

效果：

2.2 优化：保留参与运算的表达式

类似小米手机计算器的效果：

let display = document.getElementById("display");

function appendValue(value) {
  display.value += value;
}

function calculate() {
  let result;
  try {
    result = eval(display.value);
  } catch (error) {
    result = "Error";
  }
  display.value = display.value + " =";
  display.style.fontWeight = "bold";
  display.style.color = "#ff4040";
}

function clearDisplay() {
  display.value = "";
  display.style.fontWeight = "normal";
  display.style.color = "#000";
}

在这个示例中，我们对 calculate() 函数进行了修改。在计算结果之前，我们将 display.value 的内容追加了一个等号，并将其样式设置为粗体以及高亮的红色。这样，在执行计算后，display.value 会保留原来的内容并以高亮方式展示计算结果。

同时，我们还对 clearDisplay() 函数进行了修改，以便在清除显示区域的内容时将样式重置为默认值。

通过以上修改，你可以实现新增的特性：执行计算后仍然保留表达式的内容，并以高亮的方式展示计算结果。记得将代码保存为相应的文件，并将它们一起放在同一个目录下，然后用浏览器打开 HTML 文件进行测试。

效果：功能不好使了