打字机效果

最新推荐文章于 2024-05-24 13:39:19 发布

weixin_34315485

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量104

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/vali/p/5904176.html

版权

原理：获取需要打字机效果的句子，然后按照index++添加定时器

逐个显示，代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="jquery.min.js"></script>
 </head>
 <body>
	<div class="autotype" id="autotype">
	<p>我是张超，一名前端工程师</p>
	<br/>
	<p>你温柔的表情</p>
	<p>会让我伤心</p>
	<br/>
	<p>六月的雨，只是无情的你~</p>
</div>

<script>
		$.fn.autotype = function(){
		var $text = $(this);
		console.log('this',this);
		
		var str = $text.html();//返回被选 元素的内容
		
		var index = 0;
		var x = $text.html('');
		//$text.html()和$(this).html('')有区别
		
		var timer = setInterval(function(){
			//substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
			var current = str.substr(index, 1);
			
			if(current == '<'){
			//indexOf() 方法返回">"在字符串中首次出现的位置。
				index = str.indexOf('>', index) + 1;
			}else{
				index ++ ;
			}
			
			//console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? '_': '']);
			//substring() 方法用于提取字符串中介于两个指定下标之间的字符
			$text.html(str.substring(0, index) + (index & 1 ? '_': ''));
			if(index >= str.length){
				clearInterval(timer);
			}
		},100);
	};
	
	$("#autotype").autotype();
</script>
 </body>
</html>

转载于:https://www.cnblogs.com/vali/p/5904176.html

weixin_34315485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打字机效果

原理：获取需要打字机效果的句子，然后按照index++添加定时器逐个显示，代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> &l...
复制链接

扫一扫