Web开发基础_JQuery学习_0007_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>

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

猜你喜欢

转载自blog.csdn.net/Coder_Boy_/article/details/81433080