js打字机效果

最新推荐文章于 2024-09-03 09:35:03 发布

啊哈前端

最新推荐文章于 2024-09-03 09:35:03 发布

阅读量1.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wuzhe128520/article/details/52103575

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字打印</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #print,#print2{
            min-height: 18px;
            line-height: 18px;
        }
    </style>
</head>
<body>
<div id="print">

</div>
<div id="print2"></div>
<div id="print3"></div>
<script type="text/javascript">
window.οnlοad=function(){
        var typewriterArr=[],     //打字的数组队列
            typewritering=false,  //打字机的线程是否开启
            typewriterID=-1,//打字机的线程
            typewriterTime=1000,  //定时调用的时间
            typewriterEffect=function(ary){  //增加显示的元素
                var len=ary.length,
                        i=0;
                for(;i<len;i++){
                    var elem=ary[i],
                        maxlength=elem.str.length;
                        typewriterArr.push({
                            "context": document.getElementById(elem.context),     //目标元素上下文
                            "str" : elem.str,      //显示的元素
                            "lening": 0,     //截取的长度
                            "maxLength": maxlength //最大的长度
                        });
                        document.getElementById(ary[i].context).style.color=ary[i].color||"#eb6666";
                }
                return typewriterArr;
            },
            maintype=function(){
                var length=typewriterArr.length;
                loopfun=function() {
                    var i= 0,
                        isend =true;
                    for(;i<length;i++){
                        var eing=typewriterArr[i];
                        //console.log("eing:"+eing.lening);
                        if(eing.lening<eing.maxLength){
                            eing.lening++;
                            isend=false;
                            eing.context.innerHTML=typewriterArr[i].str.substring(0,eing.lening)+"_";
                        }
                        else {
                            eing.context.innerHTML=typewriterArr[i].str.substring(0,eing.lening)+"。";
                        }

                    }
                        if(isend){
                            //console.log("停止");
                            stopwriter();
                            return;
                        }
                    typewriterID=setTimeout(loopfun,500);
                }
                return loopfun;
            },
            starttypewrite=function(ary){
                if(!typewritering){
                    typewritering=true;
                    typewriterEffect(ary);
                    maintype()();
                }
            },
            stopwriter=function(){
                clearTimeout(typewriterID);
                typewritering=false;
            };
    starttypewrite([
        {
        context: "print",
        str: "命运给了你一个较低的起点，是想告诉你，让你用你的一生去奋斗出一个绝地反击的故事，这个故事不是一个水到渠成的童话，没有一点点人间疾苦，这个故事是：“有志者，事竟成，破釜成舟，百日秦关终属楚”；这个故事是：“苦心人，天不负，卧薪尝胆，三千越甲可吞吴”",
        color : "#eb6678"
         },
        {
            context: "print2",
            str: "如果你得不到你想要的，你将得到最好的",
            color : "#eccebe"
        },
        {
            context: "print3",
            str: "所谓的迷茫就是在本该奋斗的年纪，想的太多，做的太少！！！",
            color: "#676867"
        }
    ]);
}
</script>
</body>
</html>