使用jQuery写一个ChatGPT打字效果

近年来，随着技术的不断发展，人工智能（AI）已经逐步成为了热门话题。其中，作为大型语言模型，ChatGPT已经在国内日渐火了起来，其自然语言处理功能可以让用户进行更为自然的交流，同时也可以作为各种AI产品和服务中的核心算法。

AI得到了广泛的应用并且发展迅速，从智能家居到自动驾驶、医疗等领域，比如麻省理工学院的研究人员使用AI系统发现了一种超强抗生素halicin，展示了前所未有的广谱抗菌能力，随着计算机性能和算法的改进，AI的能力也将会得到进一步提升。

尽管有些人担心AI会对人类工作产生消极影响，但是在实际应用过程中，可以看到AI逐渐地成为了各个领域的重要支撑与技术引擎，其他企业也陆续发布了新的AI产品，比如专注绘画的Stable Diffusion，通过输入文本生成近乎真实的语音Bark(SonoAI)。

AI本身作为一种语言模型而存在，可以配合各种AI产品和服务使用，比如用孙燕姿的声音唱《需要人陪》，用周杰伦的声音唱《乌梅子酱》，甚至还可以模拟和自己完全相同的声音，做视频开直播让自己化身二次元人物等。

在使用ChatGPT时看到给出的结果以打字机的形式展现出来，于是我用少量的jQuery写了一个ChatGPT打字效果。

具体代码如下：

HTML：

<div class="textbox"><span id="content"></span><span id="cursor"></span></div>

CSS：

.textbox { width:750px; margin:100px auto; padding:20px 30px; font-size:16px; color:#333; white-space:pre-wrap; line-height:30px; border:2px solid #e8e8e8; box-sizing:border-box; background:#f8f8f8; }
#cursor { width:0.2em; height:17px; margin:7px 0 0 0.1em; background-color:#000; display:inline-block; vertical-align:top; animation:blink 0.8s infinite; }
@keyframes blink {
    from, to { opacity:1; }
    50% { opacity:0; }
}

jQuery（引入jQuery库）：

$(function() {
    var text = "元丰六年十月十二日夜，解衣欲睡，月色入户，欣然起行。念无与为乐者，遂至承天寺寻张怀民。怀民亦未寝，相与步于中庭。庭下如积水空明，水中藻、荇交横，盖竹柏影也。何夜无月？何处无竹柏？但少闲人如吾两人者耳。\n————宋 · 苏轼《记承天寺夜游》"; // 需要打印的文本
    var delay = 50; // 打字速度，以毫秒为单位
    printText(text, delay);
});
function printText(text, delay){
    var chars = text.split("");
    var i = 0;
    var intervalId = setInterval(function(){
        if(i < chars.length){
            var newText = $('#content').text() + chars[i];
            $('#content').text(newText);
            i++;
        }else{
            clearInterval(intervalId);
            $('#cursor').remove();    //内容展示结束时移除文字结尾的光标，若保留光标删除或使用//注释此行
        }
    }, delay);
}

效果如下：

*本文转载自拓源Toyean