auto printer 自动打字机效果

Posted 2020-06-13

前段时间在知乎上看到了一个打字机的效果，所以，心血来潮，自己也来写了一个打字机的效果。

比较简单，但还有待优化的地方，因为自己感觉这个效果不够炫，等哪天想出好的点子了。再来更新……

代码效果预览地址：http://code.w3ctech.com/detail/2525

html：

1 <div class="container">
2   <div id="title"><h3>我喜欢出发--汪国真</h3></div>
3   <span id="content">
4   </span>
5   <span class="line">_</span>
6 </div>

css:

*{
            padding:0;
            margin:0;
        }
        body{
            
        }
        .container{
            width:80%;
            margin:0 auto;
            height:auto;
            padding-top:80px;
            color:#2d6b28;
            line-height:24px;
            font-size:20px;
            transition:all 100ms ease 100ms;
        }
        .line{
            animation:myfirst 0.5s infinite;
        }
        @keyframes myfirst
        {
            from{opacity:0}
            to{opacity:1}
        }

js:

window.onload = function () {
            var content = document.getElementById("content");
            var index = 0;
            var timer;
            var str = "我喜欢出发。n凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。太深的流连便成了一种羁绊，绊住的不仅有双脚，还有未来。n怎么能不喜欢出发呢?没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩瀚仍然遗憾；见了大海的浩瀚没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。n我自然知道，大山有坎坷，大海有浪涛，大漠有风沙，森林有猛兽。即便这样，我依然喜欢。n打破生活的平静便是另一番景致，一种属于年轻的景致。真庆幸，我还没有老。即便真老了又怎么样，不是有句话叫老当益壮吗?n于是，我还想从大山那里学习深刻，我还想从大海那里学习勇敢，我还想从大漠那里学习沉着，我还想从森林那里学习机敏。我想学着品味一种缤纷的人生。n人能走多远?这话不是要问两脚而是要问志向；人能攀多高?这事不是要问双手而是要问意志。于是，我想用青春的热血给自己树起一个高远的目标。不仅是为了争取一种光荣，更是为了追求一种境界。目标实现了，便是光荣；目标实现不了，人生也会因这一路风雨跋涉变得丰富而充实；在我看来，这就是不虚此生。n是的，我喜欢出发，愿你也喜欢。";
            function print() {
                if (index == 0) {
                    content.innerHTML += "</br></br>";
                    content.innerHTML += "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
                }
                if (str[index]=="n") {
                    content.innerHTML += "</br></br>";
                    content.innerHTML += "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
                }
                else if (index==str.length) {
                    clearInterval(timer);
                }
                else
                    content.innerHTML += str[index];
                index++;
            }
            timer=setInterval(print,100);
        }