html 字显示效果,js原生文字一个一个显示效果

今日对文字一个一个显示出来的特效给吸引，决定用原生的给实现出来，实现运用到的substring方法、setInterval计时器、clearInterval、css样式、pre标签等；

基本原理：

1)substring作用是截取字符串，把截取的字符串传给指定的DOM元素；

2)为了保证每次截取的字符串不同，因此需要用到setInterval计时器；考虑到setInterval计时器有个缺点就是停不下来；

3)这时clearInterval该上场了，clearInterval作用(当setInterval计时器次数=字符串的长度时，调用clearInterval停止计时)；

4)本文运用的pre标签，预格式化文本，个人感觉比较好用的一个标签；

5)总体来说一个小特效，Hope to help you.

废话不多说，直接上代码；

一、html代码区

乡愁

小时候

乡愁是一枚小小的邮票

我在这头

母亲在那头

长大后

乡愁是一张窄窄的船票

我在这头

新娘在那头

后来啊

乡愁是一方矮矮的坟墓

我在外头

母亲在里头

而现在

乡愁是一湾浅浅的海峡

我在这头

大陆在那头

二、css代码区

body{

width: 100vw;

height: 100vh;

background-image: url("img/dome.jpg");

background-size: 100% 100%;

background-repeat: no-repeat;

background-position: 0 0;

overflow: hidden;

}

.prebox{

margin: 0px 126px;

padding: 10px 30px;

width: 128px;

height: 322px;

background: rgba(255,255,255,.1);

border-radius: 2px;

box-shadow: 1px 2px 10px -5px #000;

}

pre{

color: #ffffff87;

width: 100%;

height: 100%;

}

三、js代码区

var index = 0;//用来计数

var text = document.getElementById("text").innerHTML;

function dome(){

document.getElementById("text2").innerText = text.substring(0,index++);//截取字符串substring

//判断计数的长度是否等于文本的长度，等于的时候则用clearInterval停止setInterval计时器

if(index == text.length){

clearInterval(time);

}

}

//声明一个变量，变量的作用是用来控制setInterval计时器

var time = setInterval(dome,200);

四、效果图展示

dome.png

五、其他

声明：文章采用的余光中先生的《乡愁》

背景图片来源：网络