关键源码如下：

代码一

 <!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. async & await 的用法

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们 编程埋下了一些 ...

  2. Uber广州车主官网本周将暂关闭

    Uber广州车主官网本周将暂关闭 http://news.southcn.com/g/2015-05/04/content_123509931.htm

  3. listview 去掉header和footer中的分割线

    在listView中加上android:headerDividersEnabled="false" android:footerDividersEnabled="fals ...

  4. 学习tabhost 实现微博的主界面

    2014-05-27 吴文付 微博的主界面还是很漂亮的,我们这里来熟悉下tabhost的使用, 网上资料很多,主要参考了:http://blog.csdn.net/shulianghan/articl ...

  5. BZOJ3270: 博物馆

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 269  Solved: 147[Submit][Status][Discuss] ...

  6. 将MPLS编译进linux内核中

    系统环境:linux kernel 2.6.35.(此环境是上一篇文章中将ubuntu内核替换后的环境) 编译过程如下: 1)首先需要下载patch文件:linux-kernel-v2.6.35-mp ...

  7. 安卓版php服务器的mysql数据库增删改查简单案例

    界面: index.php文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. Spring AOP代理时 ClassCastException: $Proxy0 cannot be cast to (类型转换错误)

    Spring AOP代理时 ClassCastException: $Proxy0 cannot be cast to (类型转换错误) 问题: 今天在用AfterReturningAdvice时,a ...

  9. Raphael的transform用法

    Raphael的transform用法 <%@ page language="java" contentType="text/html; charset=UTF-8 ...

  10. ListView 的三种数据绑定方式

    ListView 的三种数据绑定方式   1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...