jquery实现一个页面打字效果，任意文字

骑猪看日落 2022-04-04 03:40 258阅读 0赞

## jquery实现一个页面打字效果 ##

>  需求，div中的文字，顺序跳出，呈现打字效果

实现思路，创建一个div，随机乱敲一些文字（文字为白色。在页面看不出来），页面加载完成后，用jquery获取所有文字，为每一个文字都加上span标签，为了方便后续单个控制跳出，然后利用定时器，让每一个文字都显示出来（白色的时候和背景色一致，看不出来，改变文字颜色，文字就出来了），这里封装一个函数提供随机颜色，等所有文字都展现出来后，清除计时器。

下面是全部代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#container{
    			color: #fff;
    			width: 300px
    		}
    	</style>
    </head>
    <body>
    	<div id="container">
    		附近挖卡夫卡未公开垒旺火卡箍好哇开关挖开了个会挖考虑过艾兰沃克规划我看了卡我干哈忘了开考拉网更好玩挖矿旅发委两个噶玩归玩卡无法物流费爱哭鬼忘了来看望挖；啊噶玩归玩网袜挖好哇好哇安慰范围网袜网袜或监护人家大人居然居然就无法微风
    	</div>
    	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    	<script type="text/javascript">
    		var text = $("#container").text().trim();
    		$("#container").html("");
    		for(var i = 0;i < text.length;i++){
    			$("#container").append("<span>"+text[i]+"</span>")
    		}
    		var s = 0;
    		var tim = setInterval(function(){
    			$("#container span").eq(s++).css("color",getColor()).show();
    			if(s == text.length){
    				clearInterval(tim)
    			}
    		}, 100)
    		function getColor(){
    			return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
    		}
    	</script>
    </body>
    </html>

利用html5加上打字音效效果会更佳哦！

下面是效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70]: /images/20220404/009d12aa27104d1d89fca158abdfc350.png