关键源码如下：

代码一

 <!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. angularjs ajax传参

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  2. IOS开发之按钮控件Button详解

    reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...

  3. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Java数据结构整理（一）

    ava数据结构内容整理关键字: 数据结构 Collection:List.SetMap:HashMap.HashTable如何在它们之间选择一.Array , ArraysJava所有“存储及随机访问 ...

  5. iOS 错误 之 Unexpected interface name 'HomeListCell': expected expression

    说明:不应该是类HomeListCell:应该是表达式. 出现场景:赋值时,等号右面是个类名,而不是变量名.

  6. oracle存储过程的基本语法

    1.基本结构 CREATE OR REPLACE PROCEDURE 存储过程名字(    参数1 IN NUMBER,    参数2 IN NUMBER) IS变量1 INTEGER :=0;变量2 ...

  7. Flex 数据绑定

    Flex 数据绑定 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...

  8. WCF服务发布到IIS中去 在WCF调试

    第一个WCF程序 1. 新建立空白解决方案,并在解决方案中新建项目,项目类型为:WCF服务应用程序.建立完成后如下图所示: 2.删除系统生成的两个文件IService1.cs与Service1.svc ...

  9. PHP1.0版本上传OSS报错，仿照2.0版本传入的居然是句柄

    代码如下:          $oss_sdk_service = new ALIOSS();              $oss_sdk_service->set_debug_mode(FAL ...

  10. node源码详解（六） —— 从server.listen 到事件循环

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource6 本博客同步在https://cnodejs.o ...