• auto printer 自动打字机效果


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

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

    代码效果预览地址: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{
                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);
            }
  • 相关阅读:
    poj3273Monthly Expense
    poj2516Minimum Cost
    poj1201Intervals(差分约束)
    poj3122Pie
    poj3258River Hopscotch
    hdu3308LCIS(线段树区间合并)
    CF1178F2 Long Colorful Strip
    CF906C Party
    [NOI2002]贪吃的九头龙
    CF1178F1 Short Colorful Strip
  • 原文地址:https://www.cnblogs.com/younth/p/5189731.html
Copyright © 2020-2023  润新知