推广 热搜: 公司  快速  中国  上海    未来  企业  政策  教师  系统 

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

   日期:2024-12-25     作者:s6ahgj    caijiyuan   评论:0    移动:http://keair.bhha.com.cn/mobile/news/4827.html
核心提示:( 本文阅读时间:5分钟 )ChatGPT很擅长解决知识型问题, 使用得当,就得到提效小帮手一枚。另外,与ChatGPT协作的过程中要有这

( 本文阅读时间:5分钟 )

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

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

思考

本文地址:http://keair.bhha.com.cn/news/4827.html    康宝晨 http://keair.bhha.com.cn/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新资讯
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号