zoukankan      html  css  js  c++  java
  • 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);
            }
  • 相关阅读:
    MyBatis之三:多表联合查询
    MyBatis之二:简单增删改查
    MyBatis之一:入门
    如何用Maven创建web项目(具体步骤)
    Maven3.2创建webapp项目过程中问题以及解决方案
    纯前端下载数据Excel文档
    centos7 yum无法正常工作
    Element ui table selection 分页支持保存已经选中的数据,同时支持随时删除选中的数据,并设置默认选择
    删除排序数组中的重复选项
    列表数据(包含父节点关系)转化为树形结构
  • 原文地址:https://www.cnblogs.com/younth/p/5189731.html
Copyright © 2011-2022 走看看