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代码区


三、js代码区


四、效果图展示


dome.png

五、其他

声明:文章采用的余光中先生的《乡愁》
背景图片来源:网络

你可能感兴趣的:(js原生文字一个一个显示效果)