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

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

01

与ChatGPT沟通的一些技巧

1.1 ChatGPT不承诺正确性

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

1.2 ChatGPT沟通的5个小技巧

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

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

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

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

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

02

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

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

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

CSS（calculator.css）

Javascript（calculator.js）：

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

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

效果：

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

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

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

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

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

效果：功能不好使了

进行反馈并指出问题： “使用修改后的源码，报错了：执行calculate()函数后，display组件中没有显示计算结果”

效果：参与运算的信息，没有看到

进行反馈并指出问题：

“运算结果正确了，但是 参与运算的信息 没有看到”

效果：ok

【完整的源码见文末】

上面的HTML代码定义了一个网页计算器。在页面上有一个 元素用于显示用户输入和计算结果，它的 属性禁用了输入。 下面是按钮的解析：

注意，在HTML中使用了一个外部CSS文件 来设置计算器的样式。

最后，通过引入 文件，将 Javascript 代码嵌入到页面中。 这个脚本包含了我们之前解析过的 、 和 函数，还包括一些相关的 DOM 操作来实现计算器的功能。

整体上，这段源码创建了一个简单的网页计算器界面，允许用户输入数字和运算符，进行计算并显示结果。

04

思考

    以上就是本篇文章【使用ChatGPT从零开始开发并成功运行的网页计算器！后端小白也能轻松搞定】的全部内容了，欢迎阅览 ！ 文章地址：http://keair.bhha.com.cn/news/4827.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 康宝晨移动站 http://keair.bhha.com.cn/mobile/ , 查看更多