原生js常用的方法（【ChatGPT】原生JS实现ChatGPT小型Demo）
导读：初入前端的小白也可以尝尝鲜...
初入前端的小白也可以尝尝鲜
无需科学上网 ，调用API2D的接口进行连接（也可以换成官方API ，均有免费额度）
第一步 、注册API2D
https://api2d.com/r/187255
使用GitHub或邮箱进行注册登录
，通过 GitHub 注册的开发者将获得 50 次的免费次数
第二步 、复制ForwardKey
第三步 、新建一个html文件
此处省略 。 。 。
第四步 、将代码复制到新建的html文件中
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Chat GPT客服</title> </head> <body> <div class="rightSide"> <div class="header"> <div class="imgText"> <div class="userimg"> <img src="https://image.51uhj.com/wx/676e4ff60ad46337f9b39d8757766bf581b9b89f5927b1bdf4766a456efdd3d3.png" class="cover"> </div> <h4>梯梯助手Chat GPT客服<br><span>在线</span></h4> </div> </div> <!--chatbox--> <div id="chatBox" class="chatBox"> <div class="message frnd_message"> <p>欢迎使用梯梯助手Chat GPT客服 ，有什么问题都可以问我 。</span><br><span id="time"></span> </p> </div> </div> <!--chat input--> <div class="chatbox_input"> <div class="chatbox_input_div"> <input id="chatInput" type="text"> <button id="chatbox_input_send" class="chatbox_input_send">发送</button> </div> </div> </div> </body> <script> document.getElementById(time).innerHTML = new Date().toLocaleString(); var defuleValue = function debounce(fn, delay = 2000) { // 是闭包中的 let timer let changeDom = document.getElementById(chatbox_input_send) // input事件调用的函数 ，相当于obj调用函数 this指向Input return function () { defuleValue = document.getElementById(chatInput).value // 这个if 判断不做也没关系 ，判断了（除第一次非空的情况）也就是执行从第二次开始 ，在延迟时间内多次触发才会走该判断 if (timer) { clearTimeout(timer) } else { changeDom.innerHTML = 正在询问 changeDom.disabled = true document.getElementById(chatInput).value = "" } // 此时的箭头函数的this 和 arguments 都是从外部函数继承而来 // 如果用普通函数就要用词法作用域 var that = this var arg = arguments timer = setTimeout(() => { // 使得传入的回调函数的this 指向Input这个元素对象 // arguments是该事件的详情 ，可以获得该函数被调用时的所有参数,是一个event 对象（所有Dom事件都会传event对象进入） // 直接使用 fn() 问题也不大 fn.apply(this, arguments) timer = null }, delay) } } // 直接使用 document.getElementById(chatbox_input_send).addEventListener(click, debounce(() => { // 可直接使用this.value获得输入框的值; arguments可用于获取具体触发事件的信息 // console.log(defuleValue) this.handleSend(defuleValue) })) document.getElementById(chatInput).addEventListener(keydown, function (event) { if (event.keyCode == "13") { document.getElementById(chatbox_input_send).click(); } }) function handleSend(inputValue) { // console.log(1); let inputDom = document.getElementById(chatBox); if (!inputValue.length) { alert(请输入您的问题！); document.getElementById(chatbox_input_send).innerHTML = 发送 document.getElementById(chatbox_input_send).disabled = false defuleValue = "" return } if (inputValue.length > 50) { alert(您输入的问题过长！); document.getElementById(chatbox_input_send).innerHTML = 发送 document.getElementById(chatbox_input_send).disabled = false defuleValue = "" return } inputDom.innerHTML = inputDom.innerHTML + <div class="message my_message"><p> + inputValue + </span><br><span> + new Date().toLocaleString() + </span> </p></div> const params = { model: gpt-3.5-turbo, messages: [{ role: user, content: inputValue }], } let xhr = new XMLHttpRequest(); xhr.open(post, `); opacity: 0.06; } .header { position: relative; width: 100%; height: 60px; background: #ededed; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; } .userimg { position: relative; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; cursor: pointer; } .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .imgText { position: relative; display: flex; justify-content: center; align-items: center; } .imgText h4 { font-weight: 500; line-height: 1.2em; margin-left: 15px; } .imgText h4 span { font-size: 0.8em; color: #555; } .chatBox { position: relative; width: 100%; /* height: calc(100%-120px); */ height: 70vh; padding: 50px; overflow-y: auto; } .message { position: relative; display: flex; width: 100%; margin: 5px 0; } .message p { position: relative; right: 0; text-align: right; max-width: 65%; padding: 12px; background: #dcf8c6; border-radius: 10px; font-size: 0.9em; } .message p::before { content: ; position: absolute; top: 0; right: -12px; width: 20px; height: 20px; background: linear-gradient(135deg, #dcf8c6 0%, #dcf8c6 50%, transparent 50%, transparent); } .message p span { display: block; margin-top: 5px; font-size: 0.85em; opacity: 0.5; } .my_message { justify-content: flex-end; } .frnd_message { justify-content: flex-start; } .frnd_message p { background: #fff; text-align: left; } .message.frnd_message p::before { content: ; position: absolute; top: 0; left: -12px; width: 20px; height: 20px; background: linear-gradient(225deg, #fff 0%, #fff 50%, transparent 50%, transparent); } .chatbox_input { position: relative; width: 100%; /* height: 150px; */ background: #f0f0f0; padding: 15px; justify-content: space-between; align-items: center; } .chatbox_input input { position: relative; width: 90%; margin: 0 20px; padding: 10px 20px; border: none; outline: none; border-radius: 30px; font-size: 1em; } </style>第五步 、将复制的ForwardKey粘贴到这个地方
！！！注意 Bearer与空格不能删除
第六步 、双击打开html文件
这样就可以愉快的聊天了 ，如果只是想简单的尝试一下话就不用看下面的附录了 。
附录
代码实现了按钮与输入框防抖置灰
如果想正式使用的话请将ForwardKey加密 ，否则会有恶意攻击的风险
如果需要更加深入的功能（如更换训练模型 ，更换版本）请看API2D官方文档（结一下广告费 ，本条
目录
第一步 、注册API2D
第二步 、复制ForwardKey
第三步 、新建一个html文件
第四步 、将代码复制到新建的html文件中
第五步 、将复制的ForwardKey粘贴到这个地方
第六步 、双击打开html文件
附录
RiverGod-致力于每一个还有梦想的前端小白
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！