前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。

这篇具有很好参考价值的文章主要介绍了前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、演示

前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。,前端开发攻略,javascript,html5,css

2、实现代码

<!DOCTYPE html>
<html lang="ch-ZN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .container {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 490px;
        height: 672px;
        background-repeat: no-repeat;
        background-size: cover;
        position: fixed;
      }
      #box {
        color: rgb(255, 255, 255);
        padding: 2%;
        width: 330px;
        height: 400px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background-color: #000;
      }
    </style>
    <script>
      let textStr =
        'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, voluptatibus quos consequatur, quibusdam corrupti quo dolor quisquam quae eveniet voluptas, maxime dicta magnam ipsum rem dignissimos soluta sit consequuntur inventore quaerat! Nemo consectetur quo odio odit sed porro velit distinctio nam. Voluptates in nihil deleniti quia ducimus a vel temporibus.'
      let strp = ''
      let i = 0

      // 实现自动打字效果
      function print1() {
        if (textStr[i] != '/') {
          strp += textStr[i]
          document.getElementById('box').innerHTML = strp + '|'
        } else {
          document.getElementById('box').innerHTML = strp + '<br><br>' + '|'
          strp += '<br><br>'
        }
        i++
      }

      function print2() {
        setTimeout(() => {
          document.getElementById('box').innerHTML = strp + ' '
        }, 100)
        setTimeout(() => {
          document.getElementById('box').innerHTML = strp + '|'
        }, 600)
      }

      let printid = setInterval(() => {
        print1()
        if (i == textStr.length) clearInterval(printid)
      }, 90)

      setTimeout(() => {
        setInterval(print2, 1060)
      }, (textStr.length - 1) * 90)
    </script>
  </head>
  <body>
    <div class="container">
      <div id="box"></div>
    </div>
  </body>
</html>

3、实现思路

  1. 创建一个空字符串 strp 用于存储逐字打印的文本内容,以及一个计数器 i 用于跟踪当前打印到的字符的索引。

  2. 编写 print1() 函数,该函数负责实现文本的逐字打印效果。在函数内部,通过检查 textStr 中的字符来逐个构建 strp 字符串,并将其显示在 HTML 页面上的 box 元素中。当遇到 / 字符时,在 box 中添加换行符。

  3. 编写 print2() 函数,该函数用于模拟光标的闪烁效果。通过两个 setTimeout 函数来实现,首先在100毫秒后将光标去除,然后在600毫秒后再次显示光标。

  4. 使用 setInterval 函数创建一个定时器 printid,在90毫秒的间隔内调用 print1() 函数,实现逐字打印的效果。当 i 的值等于 textStr 的长度时,清除定时器,停止打印。

  5. 最后,使用 setTimeout 函数在最后一个字符被打印后启动 print2() 函数,实现光标闪烁效果。文章来源地址https://www.toymoban.com/news/detail-854845.html

到了这里,关于前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大模型问答助手前端实现打字机效果

    随着现代技术的快速发展,即时交互变得越来越重要。用户不仅希望获取信息,而且希望以更直观和实时的方式体验它。这在聊天应用程序和其他实时通信工具中尤为明显,用户习惯看到对方正在输入的提示。 ChatGPT,作为 OpenAI 的代表性产品之一,不仅为用户提供了强大的自

    2024年02月08日
    浏览(40)
  • springboot+vue实现ChatGPT逐字输出打字效果

    在调用OpenAI GPT接口时,如果不使用流式(stream:true)参数,接口会等待所有数据生成完成后一次返回。这个等待时间可能会很长,给用户带来不良体验。 为了提升用户体验,我们需要使用流式调用方式。在这篇文章中,我们将介绍如何使用Spring Boot和Vue对接OpenAI GPT接口,并实

    2024年02月07日
    浏览(44)
  • 前端开发攻略---Vue实现防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

    版权保护 :水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息,以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时,可以追溯到原始作者或版权所有者,从而加强版权保护。 身份识别 :水印可以用作作者或品牌的标识符,使观众能够轻

    2024年04月17日
    浏览(42)
  • vue3 实现 chatgpt 的打字机效果

    在做 chatgpt 镜像站的时候,发现有些镜像站是没做打字机的光标效果的,就只是文字输出,是他们不想做吗?反正我想做。于是我仔细研究了一下,实现了打字机效果加光标的效果,现在分享一下我的解决方案以及效果图 首先要明确一点,chatgpt 返回的文本格式是 markdown 的,

    2024年02月05日
    浏览(52)
  • Ubuntu开机黑屏/左上角光标闪烁/登陆界面进入后黑屏

    实验室服务器老毛病,两台服务器都出问题: 1、一台开机没有图形界面,开机后黑屏,左上角一个光标闪烁,一直停留在这个界面。 2、另外一台开机后能进到登陆界面,输入密码以后直接黑屏不显示; 以上两个问题在查阅相关博客发现应该是图形界面顺坏,但尝试博客提

    2024年02月06日
    浏览(50)
  • 前端开发攻略---根据音频节奏实时绘制不断变化的波形图。深入剖析如何通过代码实现音频数据的可视化。

    逐行解析 JavaScript 代码块: 这几行代码首先获取了  audio  和  canvas  元素的引用,并使用  getContext(\\\'2d\\\')  方法获取了 Canvas 2D 上下文对象,以便后续在画布上进行绘图操作。 initCvs  函数用于初始化画布的尺寸。它将画布的宽度设置为窗口宽度的倍数,高度设置为窗口高度

    2024年04月15日
    浏览(57)
  • 前端发送Fetch请求实现流式请求、模拟打字机效果等

    前端需要接收后端的流式返回数据,并实时渲染。 普通的xhr请求都是等http协议数据包一次性返回之后才渲染,类似于ChatGPT的Http接口内容类型为text/event-stream。这种内容类型需要与浏览器建立持久连接并持续监听服务器返回的数据。 npm 方式安装类库 使用 调用 fetchEventSource

    2024年02月13日
    浏览(43)
  • 前端开发攻略---Vue通过自定义指令实现元素平滑上升的动画效果(可以自定义动画时间、动画效果、动画速度等等)。

    这个指令不是原生自带的,需要手动去书写,但是这辈子只需要编写这一次就好了,后边可以反复利用。 IntersectionObserver 是一个用于监测元素是否进入或离开视口(viewport)的 API。它可以帮助你在页面滚动时或者元素位置改变时进行回调操作,这样你就可以根据元素是否可见

    2024年04月11日
    浏览(49)
  • PHP实现OpenApi接口ChatGPT回复输出流文字流打字效果

    在做AI聊天时,回复文字时一般用实时打字文字流效果,那PHP实现ChatGPT回复输出流文字流打字效果怎么实现呢? 先看一下效果图: 注意看一下前端ajax请求是EventStream类型。具体什么是EventStream百度了解。 后端PHP配置和实现

    2024年02月12日
    浏览(36)
  • 微信小程序-接入sse数据流并实现打字机效果( ChatGPT )

    从流中获取的数据格式如下 小程序调用SSE接口 我这边接收到的数据类型为Uint8Array,需要处理成text文本(如上图) 使对话有打字机效果 参考自:小程序实现 ChatGPT 聊天打字兼自动滚动效果 完整代码

    2024年04月09日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包