借助ChatGPT编写html小程序

article/2025/6/8 3:50:03

在数值模拟过程中,经常需要反复计算一些参数,例如常见的无量纲参数雷诺数和瑞利数等
它们的表达式如下:
R a = g β Δ T H 3 P r ν 2 Ra = \frac{g \beta \Delta T H^3Pr}{\nu^2} Ra=ν2gβΔTH3Pr
为了确定这个参数,需要给定 g , β , Δ T , H , P r , ν g,\beta,\Delta T,H,Pr,\nu g,β,ΔT,H,Pr,ν这六个量,十分的不方便。
为了保证瑞利数的变化,我们只需要改变六个值中的一个就可以了,这个值常常被选为 H H H。其它的参数一般都是固定的,根据流体的不同,例如,对于空气,其物性参数基本上是确定的,并且,由于布西内斯克假设, Δ T \Delta T ΔT的选取一般也比较固定,常常在0-10左右。所以,处 H H H外,其他参数基本上可以由如下表格给出:

g g g9.81
β \beta β3.36e-3
Δ T \Delta T ΔT10
ν \nu ν1.58e-5
P r Pr Pr0.71

使用html小程序可以实现如下功能:
1、自动预设值,后续可以自己输入修改
2、根据Ra计算H
3、根据H计算Ra

十分方便。
页面具体如下所示:可以看出,已经自动补全了一些预设值
在这里插入图片描述
上述程序是在ChatGPT的帮助下完成的,主要是由ChatGPT给出的代码进行修改,非常高效。
其中涉及一些html编程知识,记录如下:
其中有两个计算程序,分别是两个form类型
其具体格式可以在style中修改:

form {float: left;margin-left: 350px;}

为了区分两个form,可以在第二个form中添加id

<form id="form2">

然后

#form2 {float: right;margin-right: 350px;}

这样就可以实现一个在左,一个在右。但是这样还是不够清晰,我们可以对每个form继续添加标题

      <fieldset><legend>1、计算瑞利数</legend><!-- <button type="submit">Submit</button> --></fieldset>

同样可以对其设置格式

 legend {font-size: 24px;}

程序的计算部分主要在script部分

function addNumbers_Ra() {let g = document.getElementById("g").value;let beta = document.getElementById("beta").value;let deltaT = document.getElementById("deltaT").value;let H = document.getElementById("H").value;let Pr = document.getElementById("Pr").value;let nu = document.getElementById("nu").value;let result = Number(g)*Number(beta)*Number(deltaT)*Number(H)*Number(H)*Number(H)*Number(Pr) / Number(nu) / Number(nu)  ;document.getElementById("result").value = result;}

很简单的计算程序,同时需要注意如何在script中进行开放处理,需要调用math函数

 let H2 = Math.pow(Number(Ra)*Number(nu2)*Number(nu2)/(Number(g2)*Number(beta2)*Number(deltaT2)*Number(Pr2)),1/3)  ;

输入函数中,预设值的设置如下,在value中初始化即可

<label for="g">g(重力加速度):</label>
<input type="number" id="g" name="g" value=9.81><br><br>

同时代码中的希腊字母是我在网上找的粘贴过去的,似乎没有什么问题。

输出结果这个部分,调用script的函数,根据input的值得到最终结果

<input style="width: 150px; height: 50px;" type="button" id="myInput" value="calclate"  onclick="addNumbers_Ra()"><br><br>     
<label for="result">Ra(瑞利数)</label>
<input type="text" id="result" name="result" readonly>

大致就是这么个流程,本人没有什么html基础,如果从头在网上学习的话,可能需要个好几天,但是在ChatGPT的帮助下,只花了大概两个小时就搞定了,简直是神器。


http://chatgpt.dhexx.cn/article/Pew6PbLn.shtml

相关文章

微信小程序| AIGC之动手实现ChatGPT法律顾问小程序

一、需求背景 在资本退去后,现如今的互联网行情很差劲,很多创新业务都不得不砍除。再加上国内互联网时代进入到了一个增量犹显疲态,增量杀红了眼!阶段,各大互联网公司均有一种断臂求生的态势!各位互联网同行,大力发展第二职业已然变成了必要的生产力! 我们既要辩证的…

调用chatGPT制作小程序的小程序,所以程序员都能用上chatGPT

废话不多少&#xff0c;直接上案例。下面给让我为大家演示一下ChatGPT生成的React框架的前端代码: import React, { useState } from react; import axios from axios;const ChatApp () > {const [inputText, setInputText] useState();const [outputText, setOutputText…

微信已限制 ChatGPT 小程序,目前已搜索不到相关内容

12 月 15 日消息&#xff0c;最近聊天机器人 ChatGPT 非常火&#xff0c;ChatGPT 不仅能流畅地与人对话&#xff0c;还能写代码、找 Bug、做海报、写年报…… 甚至还以鲁迅的文风进行天马行空的创作&#xff0c;几乎无所不能。 ChatGPT 走红后&#xff0c;微信上也出现了很多相…

ChatGPT小程序系统:专为创作者设计的人工智能助手

在数字时代&#xff0c;有越来越多的创作者希望利用人工智能技术提高自己的创作效率和质量。作为一款大型语言模型&#xff0c;ChatGPT在自然语言处理领域具有出色的表现&#xff0c;不仅可以辅助创作者进行创作&#xff0c;还提供全方位的智能支持。为了更好地帮助创作者提高创…

元AI ChatGPT系统4.0.0独立开源版 + H5端+小程序安装配置教程

元AI系统是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。本期针对源码系统整体测试下来非常完美&#xff0c;可以说元AI是目前国内最好的一款的ChatGPT对接OpenAI 软件系统。测试了下相比上3.0.0版回答更精准&#xff0c;修复了很多BUG&#xff0c;包括新增了H5功能。当然…

微信小程序 | 借ChatGPT之手重构社交聊天小程序

一、 ChatGPT效果分析 体验过ChatGPT这一产品的小伙伴对于GPT模型的恢复效果不知道有没有一种让人感觉到真的在和真人交流的感觉。不管你的问题有多么的刁钻,它总是能以一种宠辱不惊的状态回复你。 但是对于一些很无理的要求,它有的时候也是很果断的😂 没有体验过的小伙…

2023 ChatGPT小程序H5端源码 智思AI助手v2.0.3 去授权版+搭建教程

ChatGPT小程序和H5端源码&#xff0c;智思AI助手2.0.3去授权版。一个强大的系统&#xff0c;支持Web、H5和小程序进行数据互通。该源码提供多项功能&#xff0c;包括后台功能开通、AI自由对话、文本创作、角色模拟、充值套餐和卡密兑换。一、需要准备什么资料&#xff1f;1.国内…

ChatGPT智能AI机器人微信小程序源码_带部署教程

ChatGPT智能AI机器人微信小程序源码_带部署教程下载&#xff1a;https://download.csdn.net/download/qq_45102995/87769902最近ChatGPT智能AI聊天突然爆火了 ChatGPT 是 OpenAI 开发的一款专门从事对话的人工智能聊天机器人原型。 聊天机器人是一种大型语言模型&#xff0c;采…

用ChatGPT通过WebSocket开发一个交互性的五子棋微信小程序(二)

文章目录 1 前言1.1 实现的原理1.2 如何与微信小程序联系 2 五子棋项目2.1 申请OpenAI的API2.2 调用API代码2.3 界面代码 3 同步五子棋到前端小程序3.1 WebSocket长连接3.2 获取实时下棋 4 讨论 1 前言 1.1 实现的原理 大体方向是将ChatGPT作为后端语言模型&#xff0c;然后将…

我用ChatGPT开发一个小程序赚到第一桶金

ChatGPT是OpenAI基于GPT-3.5架构训练出来的一个大型语言模型&#xff0c;其拥有广泛的使用者群体。随着机器学习技术的不断进步&#xff0c;ChatGPT在人工智能应用领域中的应用越来越广泛。 ChatGPT被广泛应用于智能客服领域&#xff0c;因为它可以帮助企业提高客户满意度和快…

2023全新ChatGPT3.5小程序开源源码 全新UI 全网首发

2023全新ChatGPT3.5小程序开源源码 全新UI 全网首发 这一版本ui比较好看 回复速度也快了 小程序是java的 带后台 本来准备给你们带上接口的然后么后台是和接口连接的 几十块钱&#xff01; 而且最近openkey 封号比较频繁所以大家自己弄下&#xff01; 小程序需配合java…

马斯克儿子被跟踪/ ChatGPT小程序遭封杀/ 特斯拉市值“腰斩”…今日更多新鲜事在此...

日报君 发自 凹非寺量子位 | 公众号 QbitAI 大家好&#xff0c;今天是12月16日星期五&#xff0c;明天就是周末啦&#xff5e; 快来和日报君康康&#xff0c;今天科技圈有哪些新鲜事。 马斯克儿子被跟踪&#xff0c;推特取消共享位置 马斯克在最新一条推特中表示&#xff0c;载…

全网首发2023全新ChatGPT3.5小程序开源源码 全新UI

源码简介&#xff1a; 2023全新ChatGPT3.5小程序开源源码 全新UI 全网首发 这一版本ui比较好看 回复速度也快了 小程序是java的 带后台 本来准备给你们带上接口的然后么后台是和接口连接的 我改什么内容你们前段都会显示所以全开源 自己搭建下吧&#xff0c;腾讯云买个国外服…

ChatGPT之小程序开发

写一个能够使用ChatGPT的微信小程序需要什么呢&#xff1f; 列出项目目录 components dialogue 是否能完成一个微信小程序项目呢&#xff1f; 投票 说说各位的看法&#xff1a;

chatgpt智能问答微信小程序+后端源码+视频搭建教程

chatgpt智能问答微信小程序后端源码视频搭建教程&#xff0c;这是一套微信小程序&#xff0c;后端是thinkphp框架为接口的&#xff0c;后端是前后端分离用elmentUI的源码框架。 小狐狸GPT付费体验系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的Ch…

如何用chatgpt源码搭建小程序

在今天的互联网时代&#xff0c;小程序已经成为了一种非常流行的应用形式&#xff0c;同时也是越来越多企业和个人必不可少的一种展示和交互的工具。开发一个自己的小程序需要有对技术的一定要求&#xff0c;但是通过使用chatgpt源码&#xff0c;我们可以比较轻松地搭建一个自己…

类 ChatGPT 开源软件,开发者用的上吗?

声明&#xff1a;本文是 Preethi Cheguri 所著文章《ChatGPT Equivalent Is Open-Source, But it Is of No Use to Developers》的中文译文。 原文链接&#xff1a;https://www.analyticsinsight.net/chatgpt-equivalent-is-open-source-but-it-is-of-no-use-to-developers/ 类…

全球最大的 ChatGPT 开源替代品来了,支持 35 种语言,网友:不用费心买 ChatGPT Plus了!...

整理 | 屠敏 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 自去年 11 月 ChatGPT 面向公众测试以来&#xff0c;OpenAI 一直占据各大科技网站的头版头条&#xff0c;以及成为很多开发者工具的首选。ChatGPT 的落地不仅仅可以提供代码建议、总结长文本、回答问题…

全球最大的 ChatGPT 开源替代品来了!

本周赠书&#xff1a;《Elasticsearch数据搜索与分析实战》 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;、整理 | 屠敏 自去年 11 月 ChatGPT 面向公众测试以来&#xff0c;OpenAI 一直占据各大科技网站的头版头条&#xff0c;以及成为很多开发者工具的首选。C…

中科院学术科研专用版 ChatGPT开源,斩获24.5K star

点击“开发者技术前线”&#xff0c;选择“星标” 让一部分开发者看到未来 来自&#xff1a;新智元 最近&#xff0c;一位开发者在GitHub上开源的「科研工作专用ChatGPT」项目大受好评。论文润色、语法检查、中英互译、代码解释等等一键搞定。这个项目就是「中科院学术专业版 C…