`
冰糖葫芦有点酸
  • 浏览: 30148 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

JavaScript 实现input输入框逐字输入效果

阅读更多
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
	<input id="container"></input>
 
	<script type="text/javascript">
 
		$("#container").on("click",function(){
			var con  = $("#container");
			var s = "4301819";
			var len = s.length;
			var index = 0;
			var tid = null;
 
			con.val('');
			tid = setInterval(function(){
				//con.append(s.charAt(index)); // 更新text属性可以用append,比如更新div中的内容
				con.val(con.val() + s.charAt(index));
				if(index ++ === len){
					clearInterval(tid);
					index = 0;
				}
			},100);
		});
	</script>
 
</body>
</html>
分享到:
评论

相关推荐

    javascript经典特效---Input框中的滚动信息.rar

    标题中的“javascript经典特效---Input框中的滚动信息”指的是在JavaScript编程中实现的一种特定的用户界面效果,即在输入框(Input)内显示滚动信息。这种特效常见于各种Web应用中,例如实时提示、错误信息显示或者...

    jQuery键盘打出逐字逐句显示特效.zip

    本资源"jQuery键盘打出逐字逐句显示特效.zip"提供了一种利用jQuery实现的动态文本输入效果,即当用户在虚拟键盘上敲击每个字符时,文本会逐字逐句地显现出来,增加了用户交互的趣味性。这个特效在网页游戏、互动故事...

    打字动画文本占位符特效jQuery插件.zip

    首先,placeholderTypewriter.js的主要功能是模拟人类在输入框中逐字输入的过程,这种效果通常用作占位符,用于提示用户输入信息。传统的HTML输入框占位符通常是静态的,而这款插件则让占位符动起来,增加了用户体验...

    sse-chat:实现EventSouce,构建简单的SSE聊天室

    用户输入的消息可以通过`fetch`或`XMLHttpRequest`发送到服务器。 ```javascript // 建立SSE连接 const source = new EventSource('/stream'); // 监听消息 source.addEventListener('message', (event) =&gt; { ...

    打字动画文本占位符特效jQuery插件特效代码

    这种效果通常用来模拟人类在键盘上逐字输入的过程,增强用户体验,使页面看起来更生动和有趣。通过使用此插件,开发者可以设置一系列要展示的文本,并且这些文本会按照预设顺序在输入框内以打字动画的形式逐一呈现。...

    生成及验证Cron的html页面

    创建一个HTML表单,包含一个输入框让用户输入Cron表达式,然后通过JavaScript进行验证。验证成功后,可以显示一个确认消息,否则显示错误提示。 ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Cron表达式验证 ...

Global site tag (gtag.js) - Google Analytics