首页

简单的打字机效果

kkcode
2020-07-18  阅读 859

通过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>复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】