原生js实现打字效果

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

不怕找不到家

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

阅读量469

点赞数 2

文章标签： javascript html css

本文链接：https://blog.csdn.net/hello_xiuxiu/article/details/124212316

版权

主要原理：利用substr()函数将传进来的字符串转为数组，并存入数组d，再通过循环调用setTimeout函数从数组d一个一个拿字符，存入数组h，每次调用的同时利用 join()函数将组数h转为字符串，再用innerText展示在需要打印D元素上，删除即反相操作

主要函数：substr() ; //利用它实现将字符串转为数组，

join(); //利用它将组数转为字符串

第一次写文章，哪里有不对的地方，还请大佬指出

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
    <div id="xdj"><span></span><span>|</span></div>
    <script>
        function dazi(as,zfcsz,ms) {//打字效果函数(as为需要绑定打字效果的元素，需要提前获取。zfcsz为需要打印的字符串，需是数组格式。ms为打印完成停留的时间，单位毫秒)
            let t = 150,f = 0,y = 1,g = 1,r = 1; 
            function its(zfc){//此函数负责打印字符串及变量转换
                let d = [],h = [],j = 0;
                for(let i=0;i<zfc.length;i++){//将字符串转为数组，并存入d
                    let g = zfc.substr(i,1);
                    d.push(g);
                }
                function it(){//打印字符串函数,每次打印一个字符
                    ty = setTimeout(function(){
                        if(j<d.length){
                            h.push(d[j]);
                        }else{
                            h.splice(d.length-(j-d.length),1);
                        }
                        as[0].innerText = h.join("");
                        j+=1;
                        it();//循环调用打印字符串函数
                    },t);
                    if(j==d.length){t=ms; r=2;}//打印完成停留的时间并设置打印完成执行光标闪烁效果
                    if(j>d.length){t=30;}//将删除的文字的速度加快
                    if(j>d.length+1){r=1; as[1].style.opacity="1"}//设置打印过程不能执行光标闪烁效果
                    if(j==d.length*2+1){//打印函数执行完毕
                        t=150;
                        y=1;
                        clearTimeout(ty);//停止调用打印字符串函数
                    }
                }
                it();
            }
            setInterval(function(){//每0.1秒判断打印函数是否执行完毕，完成则打印下一个
                if(y==1){
                    if(f == zfcsz.length){f=0;}
                    if(f != zfcsz.length){f+=1} 
                    its(zfcsz[f-1]);
                    y=2;
                }
            },100)
            setInterval(function(){//打印完成执行光标闪烁效果
                if(r==2){
                    if(g==2){
                        as[1].style.opacity="1"
                        g=1
                    }else if(g==1){
                        as[1].style.opacity="0"
                        g=2;
                    }
                }
            },500)
        }
        var as = document.querySelectorAll("#xdj span");
        var zifu = ["原生js实现打字效果","hello world!","你好 世界!"];
        dazi(as,zifu,5000);
    </script>
    <style>
        *{margin: 0; padding: 0;}
        body{background-color: #2f3542;}
        #xdj{
            display: flex;
            justify-content: center;
            margin-top: 30vh;
            font-size: 20px;
            color: white;
        }
    </style>
</body>
</html>

不怕找不到家

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现打字效果

主要原理：利用substr()函数将传进来的字符串转为数组，并存入数组d，再通过循环调用setTimeout函数从数组d一个一个拿字符，存入数组h，每次调用的同时利用join()函数将组数h转为字符串，再用innerText展示在需要打印D元素上，删除即反相操作主要函数：substr() ; //利用它实现将字符串转为数组， join(); //利用它将组数转为字符串第一次写文章，哪里有不对的地方，还请大佬指出源码如下：&l...
复制链接

扫一扫