页面中的文字，逐个显示在页面；由于电脑的配置较低，录制的视频相对来说比较卡顿

思路：

用一个定时器将预制的文字通过字符串截取.substring(0, i)方法不断的赋给要显示的区域，i在定时器里面迭代累加，当预制的文字跟显示区的文字相同时，清除定时器。

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>动起来的文字</title>

     <style>

         .page{

             width: 500px;

         }

     </style>

     <script type="text/javascript" src="js/tween.js"></script>

     <script type="text/javascript" src="js/animation.js"></script>

 </head>

 <body>

 <div class="page">

     <h1 class="page2-title">公司介绍</h1>

     <p class="li-none" id="page2Txt">

     深圳达农保险经纪有限公司成立于2016年5月，总部设立于深圳，立足打造农村互联网保险平台，首期注册资本5000万人民币，是诺普信农化股份有限公司控股的保险经纪服务商。达农保险将一直秉持“保险基于需求”的理念，以国家农业现代化的发展趋势为导向，积极发挥保险经纪金融工具的特有优势，以创新的模式，深入三农，为农业的现代化发展提供保障。展望未来，达农保险将以金融手段持续附着产业共同发展。

     </p>

     <div class="el-page2 li-none">

         <p class="fenge-solid"></p>

         <p class="page2-txt" id="page2TxtShow"></p>

     </div>

 </div>

 <script>

     var page2Txt = document.getElementById('page2Txt'),

     page2TxtShow = document.getElementById('page2TxtShow'),

     i = ;

     /*timer = setInterval(function(){

         page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0, i);

         i++;

         if(page2TxtShow.innerHTML == page2Txt.innerHTML){

             clearInterval(timer);

         };

     },60);*/

     var timer = null;

     timer = setInterval(function(){

         page2TxtShow.innerHTML = page2Txt.innerHTML.substring(,i);

         i++;

         if (page2TxtShow.innerHTML == page2Txt.innerHTML) {

             clearInterval(timer);

         }

     },);

 /*Math.animation(document.documentElement.scrollTop, 0, function (value) {

     document.documentElement.scrollTop = value;

 }, 'Quart.easeOut', 600);*/

 </script>

 </body>

 </html>

关于String 对象的知识点总结：

substring() 方法

定义与用法：

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法：stringObject.substring(start,stop)

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

注意：substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。其用法类似

　　　　如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）

//eg.script中的代码

    var str="Hello world!"

    document.write(str.substring(3,7))

slice() 方法

　 substr() 方法与slice()方法类似

String常用方法

使用说明可通过w3c school 查询

js写滚动的文字的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  3. js 滚动的文字（走马灯）

    // 滚动的文字 function marqueeScroll() { //var $target = $(".marquee_outer:visible"); if($(&quo ...

  4. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  5. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  6. js设置光标插入文字和HTML

    原文链接:js设置光标插入文字和HTML 在一个textarea的某个光标位置插入文字或者在某个编辑器中插入图片html内容,我最近经常和这些打交道,但总是一团模糊,今天整理一下关于如何插入文字,设置 ...

  7. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  8. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  9. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

随机推荐

  1. 处理OSS上传失败一例

    问题描述: 上传oss云存储,无法成功,报错: 2019-01-29 17:44:59,552 oss2.api [ERROR] 140080008111872 : Exception: {'stat ...

  2. [转] JavaScript 之 ArrayBuffer

    JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来 ...

  3. FORM表单中onclick()、submit()与onsubmit()的问题

    最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了. 于是仔细研究了下onclick.onsubmit.submit集合函数 ...

  4. Eclipse+Maven整合开发Java项目（二）➣webapp3.0以上的Maven项目

    概述 Eclipse集成Maven插件,新建maven-archetype-webapp项目的时候,采用的webapp的版本较低,默认是2.3,有些时候,我们希望升级Webapp的版本到3.0(Tom ...

  5. [POI2007]堆积木Klo

    题解: dp定义方程的时候 好像也不能都用前一个来递推..这样就不能优化了 这题看了题解才想出来... 还是很简单的啊.... 我们定义f[i]表示前i个最大收益 那么j要能从i转移就得满足a[i]- ...

  6. 网页前端 html js 相关

    1.注释 1.1HTML 注释 http://www.w3school.com.cn/html/html_comments.asp 注释标签 <!-- 与 --> 用于在 HTML 插入注 ...

  7. Telnet和SSH

    1. 协议用途 Telnet和SSH用于远程访问服务器的的两大常用协议.利用它们,我们可以管理并监控生产服务器和企业服务器,更新服务器内核,安装最新的软件包和补丁,能够远程登录服务器,开展软件开发.测 ...

  8. 【原创】c# socket 粘包 其实。。。

    文章内容有错,请直接关闭~~~不要看了.丢人. private static Dictionary<string, Packet> cache = new Dictionary<st ...

  9. day5 列表的增删改查

    1,列表的增删改查,其他操作.2,元祖.3,列表的嵌套操作.4,开一点dict. 昨日内容回顾: 字符串的方法:1,find通过元素找索引,可切片,找不到返回-12,index,找不到报错.3,spl ...

  10. 基于Docker的服务器搭建

    -----------基于Docker的多种服务器搭建----------- 开发环境 本机上的虚拟机 Centos7.4 Docker1.13.1 Openssl1.1.1 1 Nginx 1.1 ...