js写滚动的文字
页面中的文字，逐个显示在页面；由于电脑的配置较低，录制的视频相对来说比较卡顿
思路：
用一个定时器将预制的文字通过字符串截取.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写滚动的文字的更多相关文章
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- js 滚动的文字（走马灯）
// 滚动的文字 function marqueeScroll() { //var $target = $(".marquee_outer:visible"); if($(&quo ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- js设置光标插入文字和HTML
原文链接:js设置光标插入文字和HTML 在一个textarea的某个光标位置插入文字或者在某个编辑器中插入图片html内容,我最近经常和这些打交道,但总是一团模糊,今天整理一下关于如何插入文字,设置 ...
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- Node.js写文件的三种方法
Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
- 用JS写了一个打字游戏，反正我是通不了关
今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...
随机推荐
- Redis-Sentinel 哨兵
为什么需要哨兵? 一旦主节点宕机,那么需要人为修改所有应用方的主节点地址(改为新的master地址),还需要命令所有从节点复制新的主节点 那么这个问题,redis-sentinel就可以解决了 什么是 ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- 【转载】WIN7访问共享:0x80070035 找不到网络路径解决方法
转载:http://blog.chinaunix.net/uid-12372814-id-3518571.html 昨天刚装WIN7系统,今天早上准备访问服务器安装些软件,结果出现网络错误,提示Win ...
- JMeter中BeanShell的实际应用
使用Jmeter的BeanShell断言,把响应数据中的JSON跟数据库中的记录对比 很多时候我们需要把Response Data取到的 Json 字符串跟数据库里的对比,来验证接口的正确性,使用Be ...
- Codeforces 803G Periodic RMQ Problem 线段树
Periodic RMQ Problem 动态开点线段树直接搞, 我把它分成两部分, 一部分是原来树上的, 一部分是后来染上去的,两个部分取最小值. 感觉有点难写.. #include<bits ...
- Codeforces 1144G Two Merged Sequences dp
Two Merged Sequences 感觉是个垃圾题啊, 为什么过的人这么少.. dp[ i ][ 0 ]表示处理完前 i 个, 第 i 个是递增序列序列里的元素,递减序列的最大值. dp[ i ...
- RocketMQ事务消息回查设计方案
用户U1从A银行系统转账给B银行系统的用户U2的处理过程如下:第一步:A银行系统生成一条转账消息,以事务消息的方式写入RocketMQ,此时B银行系统不可见这条消息(Prepare阶段) 第二步:写入 ...
- Dig
在 UNIX 和 Linux 下,建议大家使用 dig 命令来代替 nslookup. dig 命令的功能比 nslookup 强大很多,不像 nslookkup 还得 set 来 set 去的,怪麻 ...
- TensorFlow激活函数+归一化-函数
激活函数的作用如下-引用<TensorFlow实践>: 这些函数与其他层的输出联合使用可以生成特征图.他们用于对某些运算的结果进行平滑或者微分.其目标是为神经网络引入非线性.曲线能够刻画出 ...
- Maya cmds pymel 快速选择hard edges(硬边)
Maya cmds pymel 快速选择hard edges(硬边) import maya.cmds as cmds cmds.polySelectConstraint(m = 3, t = 0x8 ...