Web开发基础_JQuery学习_0007_jQuery_index = index % texts.length;-优快云博客

本文介绍了一个使用jQuery实现的自动打分案例。当点击“打分”按钮后，页面会自动为每个教师输入框随机生成分数，并逐一填写。案例演示了如何通过jQuery选择元素、触发事件及设置定时任务。

jQuery练习

案例演示：自动打分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自动打分</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			function score(){
				//获取所有文本框
				var $texts = $(":text");
				//启动定时器
				var index = 0;
				var id = setInterval(function(){
					//模拟光标切入
					$texts.eq(index).trigger("focus");//jQuery的trigger函数
					
					//生成随机数
					var n = parseInt(Math.random()*100);
					//获取并写入此框
					$texts.eq(index).val(n);
					index++;
					if(index > $texts.length){
						clearInterval(id);
					}
					
				},2000);
				
			}
		</script>
	</head>
	<body>
	   
		<input type="button" value="打分"
		 onclick="score();">
		<p>
			苍老师：<input type="text">
		</p>
		<p>
			王老师：<input type="text">
		</p>
		<p>
			范老师：<input type="text">
		</p>
		<p>
			李老师：<input type="text">
		</p>
		<p>
			程老师：<input type="text">
		</p>
		<p>
			梁老师：<input type="text">
		</p>
	
	</body>

</html>

最终页面显示效果:点击"打分"按钮便会自动逐个打分