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

最新推荐文章于 2023-07-13 15:14:53 发布

Start_Strive

最新推荐文章于 2023-07-13 15:14:53 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

文章标签： css js html

原文链接：https://blog.youkuaiyun.com/Mr_LoveJia/article/details/112209660?utm_medium=distribute.pc_category.none-task-blog-hot-6.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-6.nonecase

通过setInterval和clearInterval实现字符串逐字显示效果，使用HTML、CSS和JavaScript完成动态文本展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本原理：
1）substring作用是截取字符串，把截取的字符串传给指定的DOM元素；
2）为了保证每次截取的字符串不同，因此需要用到setInterval计时器；考虑到setInterval计时器有个缺点就是停不下来；
3）这时clearInterval该上场了，clearInterval作用(当setInterval计时器长度=字符串的长度时，调用clearInterval停止计时)；
4）本文运用的pre标签，预格式化文本，个人感觉比较好用的一个标签；
5）总体来说一个小特效，Hope to help you.
一、效果图
在这里插入图片描述
二、代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dome</title>
    <style>
    	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%;
    	}
    </style>
</head>
<body>
<div class="prebox">
	<pre id="text2"></pre>
</div>
<div style="display:none" id="text">
	乡愁
小时候
乡愁是一枚小小的邮票
我在这头
母亲在那头

长大后
乡愁是一张窄窄的船票
我在这头
新娘在那头

后来啊
乡愁是一方矮矮的坟墓
我在外头
母亲在里头

而现在
乡愁是一湾浅浅的海峡
我在这头
大陆在那头
</div>
<script type="text/javascript">
    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);
</script>
</body>
</html>