逐渐显示文字内容的效果制作

最新推荐文章于 2024-04-08 11:12:43 发布

刚好遇见小侯

最新推荐文章于 2024-04-08 11:12:43 发布

阅读量1.5k

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/m0_61238657/article/details/122473487

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>逐渐显示文字内容</title>
	<style type="text/css" >
		
	</style>
	<script type="text/javascript" >
		var num=0;
		var text="";
		var str="标题逐渐显示文字内容";
		var moon=setInterval(function(){
			text+=str[num];
			console.log(text);
			num++;

		},1000);


		setTimeout(function(){
			clearInterval(moon);
		},str.length*1000);	


		// 思路：
		// 	1.首先让文本每秒轮询出现一次
		// 	2.然后让文本的第一个字符每秒出现一次，使用下标截取即可
		// 	3.使用让每个字符出现后留存，并拼接下一秒出现的字符，text+=str[num],num++;
		// 	4,最后设置字符的长度相对应的秒数结束轮询
	</script>
</head>
<body>
	

	
</body>
</html>