关键源码如下：

代码一

 <!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. ftp_get_file_and_directory

    class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...

  2. FB面经 Prepare: All Palindromic Substrings

    Given a string, calculate how many substring is palindrome. Ignore non-char characters. Ignore case; ...

  3. imagebutton、imageview的属性

    [转]http://blog.csdn.net/victoryckl/article/details/14162131 http://blog.sina.com.cn/s/blog_68b3fdc30 ...

  4. onethink的熟悉

    2014.07.14 下载后,并安装成功! 发现一个安装的问题.安装时,无法直接成功. 修改Url 直接跳到最后一步,实现了安装.去官网查询,发现是程序的问题. 尝试构建企业官网. 首先 实现一个企业 ...

  5. 理解Twisted与非阻塞编程

    先来看一段代码: # ~*~ Twisted - A Python tale ~*~ from time import sleep # Hello, I'm a developer and I mai ...

  6. Python关键字yield的解释

    yield 是一个类似 return 的关键字,只是这个函数返回的是个生成器. >>> def createGenerator() : ... mylist = range(3) . ...

  7. JS内存泄漏排查方法——Chrome Profiles

    一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件 ...

  8. Java Me-List控件的用法案例

    /** * Java Me-List控件的用法案例 */package com.xushouwei.cn; import java.io.IOException;import javax.microe ...

  9. 使用（Drawable）资源———ShapeDrawable资源

    ShapeDrawable用于定义一个基本的几何图形(如矩形.圆形.线条等),定义ShapeDrawable的XML文件的根元素是<shape.../>元素,该元素可指定如下属性. and ...

  10. windows下安装php5.2.*,php5.3.*,php5.4.*版本的memcache扩展

    注:如使用集成环境成功率低,请自行配置php apache,表示win7下wamp php5.4.3基础上配置拓展,成功率极低.费时. 拓展安装调试方法: 编写调试php文件 <?php  me ...