纯js实现简单的动态打字效果

最新推荐文章于 2024-05-17 02:56:57 发布

bin929

最新推荐文章于 2024-05-17 02:56:57 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： javaScript

本文链接：https://blog.csdn.net/bin929/article/details/82740783

版权

JS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function ceshi(){
                var divText = document.getElementById("div2").innerText;//获取需要显示的信息
                var len = divText.length;
                var i = 0;
                window.setInterval(function(){//使用间歇调用函数
                    if(i<=len){
                        document.getElementById("div1").innerText = divText.substring(0,i)+"|";//将要显示的信息逐个添加进要显示的位置
                    }else{
                        window.clearInterval(setInId);//输出结束后停止间歇调用函数
                    }
                    i++;
                },400);

            }

        </script>
    </head>
    <body onload="ceshi()">
        <center>
            <div id="div1" style="background-color: blanchedalmond; height: 50px; width: 100%;"></div>
            <div id="div2" style="display: none;">JS实现简单的动态打字效果</div>
        </center>       
    </body>
</html>

bin929

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
纯js实现简单的动态打字效果

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &am
复制链接

扫一扫

专栏目录