模拟打字机，文字逐个出现

迈不过友情╰ 2023-10-06 09:11 48阅读 0赞

效果图：

![20200520212259931.png][]

上代码：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <hr />
                <pre id="showMsg"></pre>
            <hr />
            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script language="javascript">
                var index = 0;
                var time;
                var outPut = "	世界你好，现在开始测试文字逐个出现";
    
                function addstr() {
                    $("#showMsg").text(outPut.substring(0, index++));
                    var len = outPut.length;
    
                    console.log(len);
                    if(len < index) {
                        clearInterval(time);
                        $("#showMsg").fadeOut(5000);
                    }
                }
                time = setInterval(addstr, 200);
            </script>
    
        </body>
    
    </html>

[20200520212259931.png]: https://img-blog.csdnimg.cn/20200520212259931.png

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关前端发送Fetch请求实现流式请求、模拟打字机效果等

前端需要接收后端的流式返回数据，并实时渲染。普通的xhr请求都是等http协议数据包一次性返回之后才渲染，类似于ChatGPT的Http接口内容类型为tex

本是古典何须时尚/ 2023年10月13日 13:01/ 0 赞/ 8 阅读

相关模拟打字机，文字逐个出现

效果图： ![20200520212259931.png][] 上代码： <!DOCTYPE html> <html> <hea

迈不过友情╰/ 2023年10月06日 09:11/ 0 赞/ 49 阅读

相关【组件封装】vue打字机效果和文字发光

目录效果如下：使用 1.下载插件 2.安装组件 3.用法 4.文字高亮和标签高亮 -------------------- 效果如下： ![a1b

r囧r小猫/ 2023年09月27日 10:08/ 0 赞/ 170 阅读

相关 unity文字逐个出现实现文字打印机效果-Text

movie\_003 代码： using System; using UnityEngine; using System.Collections;

我不是女神ヾ/ 2023年09月27日 09:48/ 0 赞/ 103 阅读

相关 js模拟打字机，文字逐个出现效果

效果展示： ![7324fd4f27034bafa1ac02d399985e2f.gif][] js方法： / @param {Object} div

阳光穿透心脏的1/2处/ 2023年09月26日 21:44/ 0 赞/ 150 阅读

相关 vue&uni-app项目实现一段文字逐个显示

实现思路是将要显示的字符串用substr() 方法进行分割，使用计时器逐个增加要分割的长度主要代码： onLoad(options) { this

朱雀/ 2023年01月17日 11:54/ 0 赞/ 367 阅读

相关 vue文字间歇无缝向上逐个滚动

<div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up':

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 01:57/ 0 赞/ 438 阅读

相关 PPT中文字的颜色打字机效果添加和设置

文章目录 1. 按 2. 添加打字动画 3. 设置打字效果 1. 按在Office/PPT2010、2013、2016、2019等版本中是没有

ゝ一纸荒年。/ 2022年12月12日 01:52/ 0 赞/ 662 阅读

相关 css打字机

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月2日今天做一个好玩的打字机，代码是比较简单的，但我设置的样式比较多；先构建好框架，一层div穿套着一

古城微笑少年丶/ 2022年03月14日 16:36/ 0 赞/ 284 阅读

相关 Css3放大+打字机

开发工具与关键技术：DW 作者：不孝子撰写时间：2019年3月12日技术有限，作业没完成，只能重发了，方法没没变只是样式上改了一下，不妨来看下，或许用的上，看一下

曾经终败给现在/ 2022年03月09日 11:36/ 0 赞/ 386 阅读