Js 如何实现一个类似 chatGPT 打字机效果

在使用chatGPT的时候,会有一个打字机的效果,以下是分别使用原生Js和Vue实现

原生 JS 实现

如下是示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Printer 打字机效果</title>
    <style>
        * {
            margin: 0;
            border: 0;
            padding: 0;
            font-family: "Courier New", Courier, monospace;
        }
        
        #window {
            width: 600px;
            height: 400px;
            background-color: black;
            margin: 100px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
        }
        
        #title-bar {
            width: 595px;
            height: 20px;
            line-height: 20px;
            padding-left: 5px;
            font-size: 14px;
            background-color: #eee;
            font-family: Consolas, serif;
        }
        
        #title-bar span:before {
            content: "\25cf";
        }
        
        #title-bar span {
            font-size: 24px;
        }
        
        #close {
            color: red;
        }
        
        #min {
            color: yellow;
        }
        
        #max {
            color: #00FF00;
        }
        
        tilte-title {
            font-family: 'Arial Black', SimHei;
            font-weight: bold;
        }
        
        #show-board {
            width: 580px;
            height: 360px;
            background-color: #333;
            color: #eee;
            padding: 10px;
            font-family: "Courier New", Courier, monospace, Consolas, serif;
        }
    </style>
</head>

<body>

    <div id="window">
        <div id="title-bar"><span id="close"></span><span id="min"></span><span id="max"></span><strong id="tilte-title">&nbsp;Console</strong></div>
        <div id="show-board"></div>
    </div>

    <script>
      (function(root, factory){
 if(typeof define === 'function' && define.amd){
  define([], factory);
 }else{
  root.Printer = factory(root);
 }
}(this, function(root){
 var Printer = {};
 Printer.printer = {"version": "0.0.1"};
 var init_options = {
  "speed" : 50,  //文字的速度
  "selector" : 'canvas',  //要打印到的标签的ID   
  "startIndex" : 0,  //从第几个字符开始打印
  "endIndex" : 0,  //打印到第几个字符结束
  "hasCur" : true,  //是否有光标
  "curId" : 'cur',  //光标的ID
  "curStr" : '_',  //光标字符
  "curStyle" : 'font-weight: bold;', //光标的样式（CSS样式）
  "curSpeed" : 100,  //光标的速度（ms）
  "lnStr": ""
 };



 var str = "", options = init_options;
 var flwCurTimer, dom, curObj, reStr='', curSwitch,index=0;

 Printer.init = function(arg_str, arg_options){
  str = arg_str;
  for( var option in arg_options ){
   options[option] = arg_options[option];
  }
  dom = document.getElementById(options.selector);
  index = options.startIndex;
  options.endIndex = options.endIndex == 0 ? str.length : options.endIndex
  options.hasCur && flwCur();
  return this;
 }


 Printer.print = function(){ //打印函数
  for(var i=0; i<str.length; i++) {
   (function(index){
    setTimeout(function(){ 
     if (str.charAt(index) === '\n'){
      reStr += '<br>' + options.lnStr;
     } else {
      reStr += str.charAt(index);
     }
     dom.innerHTML= options.lnStr + reStr
    }, options.speed * (index + 1))
   })(i);
  }

  setTimeout(function(){
   if(options.hasCur){
    var element = document.createElement("span");
    element.id = options.curId
    dom.appendChild(element);

    curObj = document.getElementById(options.curId);
    clearTimeout(flwCurTimer);
    setInterval(chCur, options.curSpeed);
   }
  }, options.speed * str.length)
 }

 function flwCur(){ //跟随光标
  dom.innerHTML += '<span id="'+options.curId+'" style="'+options.curStyle+'">'+options.curStr+'</span>';
  flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);
 }

 function chCur(){ //闪烁光标
  curObj.innerHTML = curSwitch ? options.curStr : "";
  curSwitch = !curSwitch
 }

 return Printer;
}));
    </script>
    <script>
        var str = 'itclanCoder\n';
        str += 'https://coder.itclan.net\n';
        str += '书以启智,技于谋生,活出斜杠\n';
        str += '微信公众号:itclanCoder\n';
        str += 'exit\n';
        Printer.init(str, {
            selector: 'show-board',
            lnStr: 'root@itclanCoder ~/ # '
        }).print();
    </script>
</body>

</html>

#Vue版本实现

如下是使用vue方式实现

<template>
  <div class="daziji-box">
    <div class="content"></div>
    <div class="textarea">
     <textarea v-model="message" placeholder="请输入文字后回车看看效果" @keydown.enter="handleEnter"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'你好，我是模仿ChatGPT的打字机效果',
      message:'',
    }
  },
  mounted() {
    this.autoWriting(0)
  },
  methods:{
    handleEnter() {
      event.preventDefault();//阻止enter键回车换行
      this.msg=this.message
      const dom = document.querySelector('.content')
      dom.innerHTML = ''
      this.writing(0)
      this.message=''
    },
    autoWriting(index){
        const dom = document.querySelector('.content')
        const data = this.msg.split('')
        if (index < data.length) {
            dom.innerHTML += data[index]
            setTimeout(this.autoWriting, 200, ++index)
        }
    }
  }
}
</script>

<style>
   
.daziji-box .content {
    margin: 20px 0;
}    
.daziji-box .content::after{
    content: '_';
    animation: blink 1s infinite
}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

</style>

分析

实现这个打字机的效果,核心逻辑,主要是在autoWriting这个方法的实现,页面初始化加载自动打印

通过setTimeout设置200毫秒的时间间隔，每隔200毫秒向dom中插入对应的数据,先将输入的字符串进行打散(split),然后一个一个插入到DOM节点

至于那个光标闪烁,是通过一个伪类after将光标定在这个class的最后面，并使用动画的关键帧,实现显示隐藏的循环动画，模拟光标的闪烁

来自爱客来智能助手答案

以下是爱客来智能助手的回答

实现类似 chatGPT 打字机效果的方法可以通过 JavaScript 的 setTimeout 方法和字符串截取来实现，步骤如下：

将要打印的文本内容存储到一个字符串变量中；
通过 DOM 操作，找到需要输出的文本区域；
设置一个变量用于记录当前输出的字符数，初始值为 0；
设置一个变量用于存储 setTimeout 方法的返回值，初始值为 null；
使用 setTimeout 方法，每隔一定时间截取文本字符串前面的 n 个字符并显示到文本区域中，同时更新当前输出的字符数；
当输出完整个文本字符串后，停 setTimeout 方法。以下是具体代码实现：

const text = "这是要输出的文本内容，类似PT 的打字效果"; 
const typing = () => { const output = document.getElementById("output");
let count = 0; 
let timer = null; const print = () => {
  const subText = text.substring(0, count + 1); 
  output.textContent = subText; 
  count++; if (count === text.length) {
  clearTimeout(timer); 
} else {
  timer = setTimeout(print, 50); // 每隔 50 毫秒输出一个字符 } 
}; 
 print(); 
}; 
typing();

这段代码会在页面载入时自动执行 typing 函数，实现类似 chatGPT打字机效果的效果。同时，可以通过更改 setTimeout 方法的第二个参数以调整打印速度

以下也是爱客来智能助手另外一个答案

要实现类似 chatGPT 打字机效果，我们需要用 ·JavaScript· 来模拟打字过程。下面是一个简单的实现方法：

定义一个字符串，表示要打出的完整文本。比如：const text = "Hello, world!"。
将该字符串转化为一个字符数组。比如：const characters = text.split("")。
定义一个计数器变量，表示已经显示出来的字符数。初始值为 0。
创建一个定时器，每隔一定时间（比如 100ms）将下一个字符显示出来。可以使用 setInterval 函数实现。
在每次定时器回调函数中，使用 slice 函数从字符数组中取出前 counter + 1 个字符拼接成一个新字符串，然后将该字符串设置为要在页面上显示的文本。例如：document.getElementById("text").innerText = characters.slice(0, counter + 1).join("")。
在每个定时器回调函数中，将计数器加 1。
当计数器等于字符数组的长度时，停止定时器。例如：if (counter === characters.length) clearInterval(timer)。

下面是一份示例代码：

const text = "Hello, world!";
const characters = text.split("");
let counter = 0;
const speed = 100; // 打字的速度，单位为毫秒

const timer = setInterval(() => {
  // 拼接出当前应该显示的文本
  const currentText = characters.slice(0, counter + 1).join("");
  // 将文本显示在页面上
  document.getElementById("text").innerText = currentText;

  // 增加计数器
  counter++;

  // 如果已经显示完全部字符，停止定时器
  if (counter === characters.length) {
    clearInterval(timer);
  }
}, speed);

需要注意的是，这只是一个简单的实现方法，还有很多细节需要考虑，比如打字结束后是否要添加一些额外的操作，比如将光标移动到另一个位置等等。