如何创建一个自己的插件（自动输入）

要实现模拟的手写输入，文字一个一个出现在界面上：

1.jq代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动填写文字</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<div id="textdiv"></div>
	<script>
	$(function(){
		var text = "我的益达我的益达我的益达我的益达我的益达 我的益达我的益达我的益达我的益达吃";
		var length = text.length;
		var textdiv = $("#textdiv");
		var index = 0;
		var Timer = setInterval(function(){
			
			if(index>=length){
				clearInterval(Timer);
			}
			textdiv.html("");
			var myText = text.substring(0,index+1);
			console.log("myText-----------"+myText);
			var regText = /\s+/g;
			if(regText.test(myText)){
				myText = myText.replace(regText,"<br/>");
				index++;
			}
			
			textdiv.html($("#textdiv").html()+myText);
			console.log($("#textdiv").html());
			index++;
			console.log(index);

		},100);
	});
		

	</script>
	


</body>
</html>

2.改造后的代码

html

js插件

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自动填写文字</title>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="./starText.js"></script>
</head>
<body>
   <div id="textdiv"></div>
   <script>
   $(function(){
       var text = "我的益达我的益达我的益达我的益达我的益达我的益达我的益达我的益达我的益达吃";
       var textdiv = $("#textdiv");
       var index = 0;
       textdiv.starText(0,textdiv,text);

   });

</script>

</body>
</html>

       $.fn.starText=function(index,textdiv,text){
           var length = text.length;
           var Timer = setInterval(function(){

           if(index>=length){
               clearInterval(Timer);
           }
           textdiv.html("");
           var myText = text.substring(0,index+1);
           console.log("myText-----------"+myText);
           var regText = /\s+/g;
           if(regText.test(myText)){
               myText = myText.replace(regText,"<br/>");
               index++;
           }

           textdiv.html(textdiv.html()+myText);
           console.log(textdiv.html());
           index++;
           console.log(index);

},100);

}

如何创建一个自己的插件（自动输入）

猜你喜欢