1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <style type="text/css">

        #myDiv{

            display: inline-block;

            width:500px;

            height:300px;

            background-color:rgba(0,0,0,0.3);

            color:hsla(0,100%,70%,1);

            word-wrap:break-word;

            line-height:30px;

            letter-spacing:3px;

            padding-left:3px;

            text-indent:40px;

            border-radius:5px;

            -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

            -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

            box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var myDiv = document.getElementById("myDiv");

            var contentArr = "秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛，凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子，不知是否喝了过量的酒，红的像一团火似的。村前村后的稻子，低着头弯着腰，在秋风中默默地等待着人们去收割，半空中，排着“人”字形的雁群，高兴的唱着歌，告别人们，向天边慢慢飞去……".split("");

            var content = "";

            var index = 0;

            var ID = setInterval(function () {

                content += contentArr[index];

                myDiv.innerHTML = content + "_";

                index++;

                if(index === contentArr.length){

                    myDiv.innerHTML = content ;

                    clearInterval(ID);

                    console.log("结束了");

                }

            },100);

        }

    </script>

</head>

<body>

<div id="myDiv"></div>

</body>

</html>

js+css模仿打字效果的更多相关文章

  1. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  2. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  3. CSS实现打字效果

    .print{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: dy 3s steps(60, end) in ...

  4. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

  5. js实现打字效果

    <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing& ...

  6. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  7. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  9. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. HDU_1711_初识KMP算法

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. PAT_A1111#Online Map

    Source: PAT A1111 Online Map (30 分) Description: Input our current position and a destination, an on ...

  3. CallableStatement的用法

    CallableStatement 对象为所有的 DBMS 提供了一种以标准形式调用已储存过程的方法.已储存过程储存在数据库中.对已储存过程的调用是 CallableStatement 对象所含的内容 ...

  4. 【剑指Offer】1、二维数组中的查找

      题目描述:   在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否 ...

  5. 第2章 this 、 call 和 apply

    第一部分 基础知识 第2章  this . call 和 apply 2.1  this JavaScript的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的, ...

  6. Ajax传递的参数如何在浏览器中查看

    如图当需要在浏览器中知道Ajax传递的参数可以,点击浏览器的右键检查,点击XHR,此时要记得提交带有参数的Ajax页面, 这样才可以显示出来传递的参数

  7. Dell R720修改远程管理口的密码

    今天有个客户需要通过远程管理口来查看系统事件日志,但是他们把初始密码改过并且还给忘记了.后来我决定进操作系统(cent os)进行修改.整个过程很简单,进入系统后只需要三个步骤就解决问题了 1.安装软 ...

  8. Shell入门基础

    Shell的Helloworld #!/bin/bash echo "helloworld taosir" 执行方式 方式一:用 bash 或 sh 的相对或绝对路径(不用赋予脚本 ...

  9. string.Format 格式化日期格式

    DateTime dt = DateTime.Now;//2010年10月4日 17点05分            string str = "";            //st ...

  10. Docker在WIN7上的配置

    为什么使用Docker Toolbox Docker在Windows上使用有两种方式,一是利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端,二是利用Wi ...