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

程序员文章站 2022-07-13 15:52:58

...

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

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);

}

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

如何创建一个自己的.NET Core Global Tools

详解JavaScript如何创建一个非自动播放的GIF网络组件

详解JavaScript如何创建一个非自动播放的GIF网络组件

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

WPS如何创建文本框链接当第一个输满后会自动输入到第二个

在浏览器输入一个网址，返回的数据，如何赋值给一个自己定义的变量？

PHP，如何判断一个array的key是自己填的还是自动生成的？

PHP，如何判断一个array的key是自己填的还是自动生成的？

PHP，如何判断一个array的key是自己填的还是自动生成的？

如何创建一个自己的.NET Core Global Tools