关键源码如下：

代码一

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

   <style>

     *{margin:0;padding:0;}

     body{background:#f9c;}

     #show-text{width:150px;margin:20px auto;}

     h1{text-align:center;color:white;}

  </style>

  </head>

  <body>

  <h1>input your text</h1>

  <div id="show-text">

     <p  style="color:white;font-size:14px;font-family:'微软雅黑';"><span id="bbb"></span><span id="gb">_<span></p>

 </div>

 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

 <script type="text/javascript">

 var text="静坐长思往日回，岁月蹉跎徒伤悲。小荷才露尖尖角，初设江湖岁月催。壮志未酬心犹在，琐事绕身家待归。日月虽往随心欲，梦里千回展翅飞。"

 function printer(text){

     var l = text.length;

     var t = 0;

     var arr = [];

     for(var i = 0; i < l; i++){

     arr[i] = text.substr(i,1);

     }

     setInterval(function(){ $("#gb").fadeOut(100).fadeIn(100); },300);

     var init = setInterval(function(){

     if(t < l){

         $("#bbb").append(arr[t]);

         if((t!==(l-1))&&(t%8==7)){

             $("#bbb").append('<br/>');

         }

         t++;

         }else{

        clearInterval(init);

         }

 },500);

 }

     printer(text);

 </script>

  </body>

 </html>

效果预览：点击Mygithub

代码二

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.text{width:500px;margin:30px auto;color:white;}
body{background:#c6f;}
p{text-indent:2em;}
</style>
<script>
function text(str){
var arr=[];
var text=document.getElementsByClassName("text")[0];
for(var i=0;i<str.length;i++){arr[i]=str[i];}
var p=document.getElementById("sp1");
var sp2=document.getElementById("sp2");
setInterval(function(){sp2.style.display="none";setTimeout("sp2.style.display='inline'",500);},700);
var index=0;
var obj=setInterval(function(){
if(index<arr.length){
var text=document.createTextNode(arr[index]);
}
p.appendChild(text);
index++;
},400);

}
window.onload=function(){
text("有时候，其实害怕寂寞，但又卟想去打扰别人的幸福；有时候,明明很想哭泣 却又怕眼泪从眼裏掉进心裏；有时候,很想像颗流星，即使生命只有一瞬，却我可以让爱我的和不爱我的人永远记起。其实我可以更加的勇敢去接受那些曾经的回忆，只是那是时间的车轮底，被风一吹，留不下痕迹 却伤了心，踮起脚看到窗外的云。或许它一会儿也会被别人看见，只是,他们看到的只是云，却看不到云裏带走了某人的一段记忆，感伤於此，忧伤继续……");
}
</script>

</head>
<body>
<div class="text"><p id="ptext"><span id="sp1"></span><span id="sp2">_</span></p></div>
</body>
</html>

效果预览：点击Mygithub

JS特效——文字打印机的更多相关文章

  1. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  2. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  3. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  4. js实现文字截断

    先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...

  5. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  6. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  9. 使用JS实现文字搬运工

    使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...

随机推荐

  1. Heka GeoIpDecoder 配置

    Prepare: 安装geoip-api-c,确保/usr/include/GeoIP.h存在: 源码编译安装Heka (容易出现问题): 下载GeoLiteCity.dat数据库. 配置文件举例: ...

  2. Angular - - ngInclude、ngTransclude

    这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onloa ...

  3. js与AMD模块加载

    目的: 了解AMD规范与CMD规范,写一个模块加载器雏形. 基本概念: AMD是异步模块定义规范,而CMD是通用模块定义规范.其他的还有CommonJS Modules规范. 对于具体的规范,可以参考 ...

  4. mysql5.5慢日志设置和查询

    mysql> showvariables like '%version%'; +-------------------------+---------------------+ | Variab ...

  5. linux学习笔记----权限与命令之间的关系(极重要)

    一.权限与命令之间的关系 二.文件与目录的默认权限与隐藏权限 1)umask为默认的权限(通过umask -S)查看你的系统的默认权限. umask的分数是指该默认值需要减掉的权限,比如说umask= ...

  6. 对于python的__name__="__main__"的含义的理解

    学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = '__main ...

  7. System.Web.Caching.Cache 方法汇总

    在做后台的时候,想着把所有栏目放到缓存里,就这里了一个类.必然是有缺陷,暂时没有实现滑动缓存 using System; using System.Collections; using System. ...

  8. Git学习之路（1）-Git简介

    ▓▓▓▓▓▓ 大致介绍 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds ...

  9. 史上最全的synchronized解释

    首先:推荐使用synchronized(obj)这种方法体的使用方式,一个类里面建议尽量使用单一的同步方法,多种方法混用,维护成本太大. 其次:关于java5.0新增的ReenTrantLock方法: ...

  10. Spring Boot踩坑之路一

    Takes an opinionated view of building production-ready Spring applications. Spring Boot favors conve ...