用js控制实现逐字显示

最新推荐文章于 2024-03-05 12:15:00 发布

原创最新推荐文章于 2024-03-05 12:15:00 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#逐字显示 #javascript

工作-web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的逐字显示效果的方法。通过定时更新DOM元素内的文本内容，可以创造出一种逐字打印的视觉效果。这种方法适用于网页中需要添加动态文字展示的场景。

将下面的内容保存为.html或者.jsp文件，用浏览器运行即可看到效果！！！
此功能配上背景图片（星空夜景）可以很炫酷，配上背景音乐，也可以很煽情···

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Js逐字显示</title>
<script language="javascript">
 content = "运动之后有三忌：1坐下休息；2立即洗澡；3进食大量甜食，以及凉水（要喝温开水）";
 i = 0;
 function show(){  
 str  = content.substr(0,i); 
 txt.innerHTML = str + "_"; 
 i++; 
 if (i>content.length)i=0; 
 setTimeout("show()",200); }
</script>
</head>
<body onLoad="show()">
<div id="txt"></div>
</body>
</html>