掌握 ChatGPT：在几分钟内构建您自己的计算器 Web 应用程序

希望构建自定义计算器 Web 应用程序但不想花费数小时编写 HTML、CSS 和 JavaScript 代码？那你需要试试ChatGPT，OpenAI训练的语言模型。借助 ChatGPT，您可以自动为您的计算器网络应用程序生成完整的 HTML、CSS 和 JavaScript 代码，从而使实施过程快速而轻松。

在本教程中，我们将向您展示如何在短短几分钟内使用 ChatGPT 构建您自己的计算器 Web 应用程序。通过利用 ChatGPT 自动代码生成的强大功能，您可以专注于设计计算器的界面，将其余部分留给模型。使用 ChatGPT，您无需任何编程技能即可创建具有专业外观的计算器 Web 应用程序。

无论您想在自己的网站上使用计算器还是与他人共享，ChatGPT 都能满足您的需求。只需几个步骤，您就会拥有一个功能齐全的计算器 Web 应用程序，您可以根据自己的喜好对其进行自定义。那么，让我们开始吧，看看使用 ChatGPT 构建计算器网络应用程序是多么容易！

让我们首先向 ChatGPT 提供一个简短但清晰的提示：

“构建一个计算器网络应用程序，仅使用 HTML、CSS 和 JavaScript。分别提供 HTML、CSS 和 JavaScript 代码。”

因此，人工智能聊天机器人能够直接生成 HTML、CSS 和 JavaScript 代码，此代码需要插入到新文件 index.html 中：这是计算器网络应用程序的基本 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Calculator</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="calculator"><input type="text" class="screen" disabled><div class="keys"><button class="key">7</button><button class="key">8</button><button class="key">9</button><button class="key operator">+</button><button class="key">4</button><button class="key">5</button><button class="key">6</button><button class="key operator">-</button><button class="key">1</button><button class="key">2</button><button class="key">3</button><button class="key operator">*</button><button class="key">0</button><button class="key decimal">.</button><button class="key equals">=</button><button class="key operator">/</button><button class="key clear">C</button></div></div><script src="script.js"></script>
</body>
</html>

script带有的标记src="script.js"指定用于提供计算器功能的外部 JavaScript 文件 (script.js) 的位置。

在下一个列表中，您可以看到作为 ChatGPT 对我们提示的回答的一部分提供的完整 CSS 代码。此代码需要复制并粘贴到一个新文件 style.css 中，该文件需要与 index.html 存储在同一文件夹中：

body {background-color: #f2f2f2;font-family: Arial, sans-serif;
}.calculator {background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);margin: 50px auto;max-width: 400px;padding: 20px;
}.screen {background-color: #f2f2f2;border: none;border-radius: 5px;font-size: 2em;margin-bottom: 20px;padding: 10px;text-align: right;width: 100%;
}.keys {display: grid;grid-gap: 10px;grid-template-columns: repeat(4, 1fr);
}.key {background-color: #eee;border: none;border-radius: 5px;cursor: pointer;font-size: 1.5em;padding: 10px;
}.operator {background-color: #f2f2f2;font-weight: bold;
}.decimal {font-weight: bold;
}.equals {background-color: #f2f2f2;font-weight: bold;
}

生成的 CSS 代码非常简单明了！

最后让我们看一下已经提供并需要插入到名为 script.js 的新文件中的 JavaScript 代码：

const screen = document.querySelector(".screen");
const keys = document.querySelector(".keys");
let operand1 = null;
let operand2 = null;
let operator = null;
let result = null;keys.addEventListener("click", function (event) {if (event.target.matches(".key")) {const key = event.target;const keyValue = key.textContent;if (keyValue === "C") {clearScreen();} else if (keyValue === "+" ||keyValue === "-" ||keyValue === "*" ||keyValue === "/") {handleOperator(keyValue);} else if (keyValue === ".") {handleDecimal();} else if (keyValue === "=") {handleEquals();} else {handleNumber(keyValue);}}
});function handleNumber(number) {if (operator === null) {operand1 = appendDigit(operand1, number);updateScreen(operand1);} else {operand2 = appendDigit(operand2, number);updateScreen(operand2);}
}function handleOperator(op) {operator = op;
}function handleDecimal() {if (operator === null) {operand1 = appendDecimal(operand1);updateScreen(operand1);} else {operand2 = appendDecimal(operand2);updateScreen(operand2);}
}function handleEquals() {if (operand1 !== null && operand2 !== null && operator !== null) {result = operate(operator, operand1, operand2);updateScreen(result);clearOperands();}
}function operate(op, a, b) {switch (op) {case "+":return parseFloat(a) + parseFloat(b);case "-":return parseFloat(a) - parseFloat(b);case "*":return parseFloat(a) * parseFloat(b);case "/":return parseFloat(a) / parseFloat(b);default:return null;}
}function appendDigit(operand, digit) {if (operand === null) {return digit;} else {return operand + digit;}
}function appendDecimal(operand) {if (operand === null) {return "0.";} else if (!operand.includes(".")) {return operand + ".";} else {return operand;}
}function clearScreen() {screen.value = "";clearOperands();
}function clearOperands() {operand1 = null;operand2 = null;operator = null;result = null;
}function updateScreen(value) {screen.value = value;
}

此 JavaScript 代码实现了一个简单的计算器功能。它定义了处理用户输入、处理算术运算和更新计算器显示的函数。计算器可以处理基本的算术运算，例如加法、减法、乘法和除法。