简单的打字机效果

2020-07-18 阅读 649
通过setInterval不断的截取字符串的长度，并实时的把截取的字符串放到dom中。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js打字机效果</title>
    <style>
        body{margin:0;}
        #content1,#content2{
            width:600px;
            border:1px solid orange;
            margin:20px auto;
            height:380px;
            text-indent:24px;
            padding:5px;
            text-shadow: 0 0 8px rgba(0,0,0,.5);
        }
        #content1{
            display:none;
        }
    </style>
</head>
<body>
    <h1>
        <center>简单的打字机效果</center>
    </h1>
    <div id="content1" >
        史玉柱经典语录:
    一、90%的困难你现在想都没有想到，你都不知道那是困难。  

    二、团队核心成员有人要提出辞职时，不要挽留，既然提出了，他迟早是要走的。  

    三、如果没有价格上的优势与技术上的绝对优势，千万不要进入红海市场，否则你会必输无疑！  

    四、做连锁经营业务，一定要做一套傻瓜版的营销手册与管理手册，只有这样，才能实现远距离的管理。   

    五、做成功一个店之后离你大的成功就不远了，所以你首先就是脚踏实地、集中精力地先做出一家，也是要放弃掉连锁的这种，不要在将来如何做连锁方面做太多的梦，先脚踏实地做出第一家。  

    六、做全国性市场，一定要先做一个试销市场，要一点点来，快不得；做成了，真到做全国市场时，要快半步，慢不得！   

    七、不要认为自己初中水平怎么样，初中水平跟博士后没啥区别。只要能干就行，我一直是这个观点，不在乎学历，只要能干能做出贡献就行。   

    八、作为我们曾经失败过，至少有过失败经历的人，应该经常从里面学点东西。人在成功的时候是学不到东西的，人在顺境的时候，在成功的时候，沉不下心来，总结的东西自然是很虚的东西。只有失败的时候，总结的教训才是深刻的，才是真的。  

    九、对过去成功的经验再好好总结总结，尤其是对失败的教训，夜里面下半夜夜深人静的时候你仔细想一想。反正睡觉也想，想一想实际上对你有很大收获比你看书更有用。因为有的书离你远，那是看自己过去写的东西。  

    十、最痛苦的时候，压力最大的时候，脑子里面只有一件事儿的时候，我把全国分公司经理招到荒山脚下北大门那个地方，招待所里面，然后在那个地方闭门开批判会。大家批判我，批判了三天三夜，我觉得那个就很有用。 
    </div>
    <div id="content2"></div>
    <script>
    ~function(window,undefined){
        function $$(id){
            return (!id) ? null :document.getElementById(id);
        }

        function printWord(obj){
            this.con1=$$(obj.id1),
            this.con2=$$(obj.id2),
            this.speed=obj.speed;
            this.printIn();
        }
        printWord.prototype={
            printIn:function(){
                var    count=0,
                    timer=null,
                    elem=this.con2,
                    speed=this.speed,
                    str=this.con1.innerHTML;
                timer=setInterval(function(){
                    elem.innerHTML=str.substring(0,count)+'|';
                    count++;
                    if(count>=str.length){
                        clearInterval(timer);
                        elem.innerHTML=str.substring(0,count);
                    }
                },speed)                    
            }
        }

        window.printWord=printWord;
    }(window)

    new printWord({
        id1: "content1",//隐藏字体的div
        id2: "content2",//用来展示打印字体的div
        speed: 100 //打印字体的速度
    });
    </script>
</body>    
</script>
</html>复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。【前端黑猫】
评论数量：0