先把代码摆上了吧:

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title>

         js实现文字逐渐显示

     </title>

     <script type="text/javascript">

         var paper = "真的学渣 | 敢于面对惨淡的成绩 | 敢于正视辅导员的双眸 . . .";

         var count = 1;

         function oneByOne()

         {

             var screen = paper.substr(0, count);

             loopText.innerHTML = screen;   
             count++;

             if (count > paper.length)

                 return;

             setTimeout(oneByOne, 250);

         }

         onload = oneByOne;

     </script>

     <style type="text/css">

         #test {

             position:absolute;

             right:15em;

             top:1em;

             width:1px;

         color:#ff0000;

             font-size:20px;

             font-weight:bold;

         }

     </style>

 </head>

 <body>

     <div id="test">

         <p id="loopText"></p>

     </div>

 </body>

 </html>

如果你也像我样是菜鸟, 那我就啰嗦几句.
上面处于无聊,加了一些css, 与功能无关.

文字逐个显示是通过oneByOne函数的递归调用实现的, 每250毫秒更新一次. 每更行一次多加一个字.

若想显示完再次重头开始的话, 可以将js代码if内的语句由return改为 count=0;

最后请注意13行的用法,直接使用id来改变值, 很实用的语法, 比jquery都简便, 我也是才知道.

js实现文字逐个显示的更多相关文章

  1. 使用jquery实现文本框输入特效：文字逐个显示逐个消失反复循环

    前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...

  2. 让TextView里面的文字逐个显示的动画效果实现(1)

    最近使用TextView时想要实现里面的文字逐个显示的动画效果,就如同打字一样. 主要实现思想:新建一个TextView的派生类,先将要逐个显示的字符串保存变量 mOriginalStr 中,然后启动 ...

  3. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  4. js实现文字逐个出现动效

    效果 首先看下效果,这是在h5页面中常见的一中文字展现方式,那么是怎么实现的呢?其实很简单 思路 用一个定时器将预制的文字通过.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面 ...

  5. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  6. js标题文字向上滚动

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

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

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

  8. 基于jQuery实现文字倾斜显示代码

    这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...

  9. 写了一个迷你toast提示插件，支持自定义提示文字和显示时间

    写了一个迷你toast提示插件,支持自定义提示文字和显示时间,不想用其他第三方的ui插件,又想要toast等小效果来完善交互的同学可以试试, 代码中还贡献了一段css能力检测js工具函数,做项目的时候 ...

随机推荐

  1. OpenCV HaarTraining代码解析（二）cvCreateMTStumpClassifier（建立决策树）

    HaarTraining关键的部分是建立基分类器classifier,OpenCV中所採用的是CART(决策树的一种):通过调用cvCreateMTStumpClassifier来完毕. 这里我讨论利 ...

  2. WebService-03-使用CXF开发服务端和客户端

    写在前面的话 前面两节说了使用Java提供的包开发服务端和客户端,现在使用CXF来开发,CXF提供了两个类发而服务,一个是ServerFactoryBean,另一个是JaxWsServerFactor ...

  3. 一种单片机支持WiFi的应用——SimpleWiFi在单片机中的应用

    一种单片机支持WiFi的应用——SimpleWiFi在单片机中的应用 先上图: 现在的智能控制都是基于微控制器,随着智能的手持终端的普及,基于智能终端的控制就会越来越普遍. WIFI便是其中的一种.W ...

  4. swift 笔记2

    swift交流群:342581988,欢迎增加. 今天真郁闷啊,把mac升级到10.10了.如今好了,曾经的程序都跑不了了.哎,不说了,让我郁闷会再. 说说条件推断吧,事实上这些基本的语法大家都知道肯 ...

  5. Powershell Mail module, 发送outbox 里的全部邮件（一个.csv文件代表一封邮件）

    把creating mail代码写到调用处,往outbox写入 mailxxx.csv文件,入面记录了邮件的主要内容 写入 #template $TMP = IMPORT-CSV "$($d ...

  6. 《TCP/IP作品详细解释2：实现》笔记--Radix树路由表

    通过IP完整的路由是路由机制,它通过搜索路由表来确定从哪个分组被发送的接口执行此,它是不一样的路由策略,路由策略 它是一组规则,这些规则可以被用来确定哪些路由编程到路由表,Net/3内核实现的路由机制 ...

  7. gradle多模块开发(转)

    参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...

  8. sql优化-提防错误关联

    在写sql时,在多表关联时,有时候容易把关联关系写错.一般情况下,该问题比较容易发现,但如果sql较长时,光靠眼力就比较难发现了.今天写了一个脚本,碰到该问题了. 第一版本的脚本如下: select ...

  9. atitit.团队建设--要不要招技术储备人才的问题

    atitit.团队建设--要不要招技术储备人才的问题 1.      人才的储备和招聘. 1 1.1.   模式1.     养兵千日,用兵一时 1 1.2. 模式2,暂时抱佛脚,也不多招一个人 1 ...

  10. POJ2155:Matrix(二维树状数组，经典)

    Description Given an N*N matrix A, whose elements are either 0 or 1. A[i, j] means the number in the ...