js模拟打字机，文字逐个出现效果

阳光穿透心脏的1/2处 2023-09-26 21:44 162阅读 0赞

**效果展示：**

![7324fd4f27034bafa1ac02d399985e2f.gif][]

**js方法：**

/**
     * @param {Object} divid 展示数据框id
     * @param {Object} content 展示内容
     */
    function addTxt(divid, content) {
    	let i = 0;
    	let interval;
    
    	if (i > content.length) {
    		clearInterval(interval);
    	} else {
    		interval = setInterval(() => {
    			i++;
    			str = content.substr(0, i);
    			if (i > content.length) {
    				$('#' + divid).html(str);
    				clearInterval(interval);
    			} else {
    				$('#' + divid).html(str + "_");
    			}
    		}, 80);
    	}
    }

**调用测试：**

let content = '足球是一项全球性的运动，它不仅是一项体育竞技，更是一种文化、一种生活方式。足球在世界范围内的影响力越来越大，成为了连接人们的纽带，也成为了国家间交流的重要方式。' +
    	'<br>首先，足球是一项激烈的体育竞技，需要运动员们在球场上付出巨大的努力才能取得胜利。在足球比赛中，每个球员都需要充分发挥自己的技术和智慧，与队友共同完成进攻和防守的任务，才能够在比赛中取得胜利。这种团队合作的精神不仅让运动员们更好地理解合作和信任的重要性，也让他们更加珍视团队的荣誉和成就。' +
    	'<br>其次，足球也是一种文化，它承载了许多国家和民族的文化和历史。足球比赛不仅仅是一场比赛，更是一种文化交流。在足球比赛中，球迷们会为自己喜欢的球队疯狂呐喊，为球队加油打气，这种热情和激情也成为了足球文化的重要组成部分。同时，足球也是一种跨越国界的文化，足球比赛将不同国家和民族的人们紧密联系在一起，促进了国际间的交流与合作。' +
    	'<br>第三，足球也是一种生活方式。足球在许多国家和地区都成为了人们生活中的重要组成部分。在周末的时候，球迷们会聚集在一起观看比赛，共同享受足球的乐趣。足球也成为了一种生活方式，许多人会通过踢球来锻炼身体、缓解压力，还有一些人会通过足球来结交朋友、扩大社交圈。' +
    	'<br>总之，足球不仅仅是一项体育运动，更是一种文化、一种生活方式。足球在全球范围内拥有广泛的影响力，它连接了人们的心灵，让人们更加接近，也更加理解彼此。足球不仅仅是一场比赛，更是一种精神，一种信仰，它让我们更加勇敢、坚定，更加热爱生活。';
    // 方法调用测试	
    addTxt('content', content);

**完整示例：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="content">
    
    		</div>
    	</body>
    	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    	<script type="text/javascript">
    		/**
    		 * @param {Object} divid 展示数据框id
    		 * @param {Object} content 展示内容
    		 */
    		function addTxt(divid, content) {
    			let i = 0;
    			let interval;
    
    			if (i > content.length) {
    				clearInterval(interval);
    			} else {
    				interval = setInterval(() => {
    					i++;
    					str = content.substr(0, i);
    					if (i > content.length) {
    						$('#' + divid).html(str);
    						clearInterval(interval);
    					} else {
    						$('#' + divid).html(str + "_");
    					}
    				}, 80);
    			}
    		}
    
    		let content = '足球是一项全球性的运动，它不仅是一项体育竞技，更是一种文化、一种生活方式。足球在世界范围内的影响力越来越大，成为了连接人们的纽带，也成为了国家间交流的重要方式。' +
    			'<br>首先，足球是一项激烈的体育竞技，需要运动员们在球场上付出巨大的努力才能取得胜利。在足球比赛中，每个球员都需要充分发挥自己的技术和智慧，与队友共同完成进攻和防守的任务，才能够在比赛中取得胜利。这种团队合作的精神不仅让运动员们更好地理解合作和信任的重要性，也让他们更加珍视团队的荣誉和成就。' +
    			'<br>其次，足球也是一种文化，它承载了许多国家和民族的文化和历史。足球比赛不仅仅是一场比赛，更是一种文化交流。在足球比赛中，球迷们会为自己喜欢的球队疯狂呐喊，为球队加油打气，这种热情和激情也成为了足球文化的重要组成部分。同时，足球也是一种跨越国界的文化，足球比赛将不同国家和民族的人们紧密联系在一起，促进了国际间的交流与合作。' +
    			'<br>第三，足球也是一种生活方式。足球在许多国家和地区都成为了人们生活中的重要组成部分。在周末的时候，球迷们会聚集在一起观看比赛，共同享受足球的乐趣。足球也成为了一种生活方式，许多人会通过踢球来锻炼身体、缓解压力，还有一些人会通过足球来结交朋友、扩大社交圈。' +
    			'<br>总之，足球不仅仅是一项体育运动，更是一种文化、一种生活方式。足球在全球范围内拥有广泛的影响力，它连接了人们的心灵，让人们更加接近，也更加理解彼此。足球不仅仅是一场比赛，更是一种精神，一种信仰，它让我们更加勇敢、坚定，更加热爱生活。';
    		// 方法调用测试	
    		addTxt('content', content);
    	</script>
    </html>

[7324fd4f27034bafa1ac02d399985e2f.gif]: https://img-blog.csdnimg.cn/7324fd4f27034bafa1ac02d399985e2f.gif