html+jq，手写原创点名，直接拷贝即可

最新推荐文章于 2024-04-22 23:06:24 发布

魏亚强

最新推荐文章于 2024-04-22 23:06:24 发布

阅读量255

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wyq188945/article/details/90678585

版权

前端专栏收录该内容

22 篇文章

订阅专栏

该博客介绍了使用HTML和JQ实现点名功能，可直接拷贝使用。借助HTML搭建页面结构，JQ实现交互逻辑，为开发者提供了便捷的点名功能实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>                                                                                                                  
<html>                                                                                                                           
	<head>                                                                                                                       
		<meta charset="UTF-8">                                                                                                   
		<title></title>                                                                                                          
	</head>                                                                                                                      
	<style>                                                                                                                      
		#container{                                                                                                              
			margin: 0 auto;                                                                                                      
			height:800px;                                                                                                        
			width: 800px;                                                                                                        
			border: 1px solid red;    
		}
		.div{
			height: 100px;
			width: 105px;
			float: left;
			line-height: 100px;
			text-align: center;
			margin-left: 2px;
			border: 1px solid green;
		}
		input{
			width: 100px;
			height: 100px;
			margin-left: 300px;
			margin-top: 200px;
		}
		                                                                                                                        
	</style>                                                                                                                     
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>                                                          
	<body>                                                                                                                       
		<div id="container">                                                                                                     
			<div class="div" style="display: none;"></div>   
			<div class="div">好</div>
			<div class="div">好</div>
			<div class="div">学</div>
			<div class="div">习</div>
			<div class="div">天</div>
			<div class="div">天</div>
			<div class="div">向</div>
			<div class="div">上</div>
			<div class="div">你</div>
			<div class="div">是</div>
			<div class="div">猪</div>
			<div class="div">吗</div>
			<div class="div">傻</div>
			<div class="div">冒</div>
			<input type="button" value="点击开始" />
		</div>                                                                                                                   
	</body>  
	<script>
		$("input[type=button]").click(function(){
			var tem=1;
			var inter=setInterval(function(){				
				$("#container").find("div").eq(Math.floor(tem%15)).css("background","red");			
				if(tem%15==0){
					//$("#container").find("div").eq(Math.floor(tem%14)).css("background","red");	
					$(".div").css("background","gray")					
				}
				if(tem>50){
					clearInterval(inter);
					$(".div").css("background","gray");
					$("#container").find("div").eq(Math.floor(tem%15)).css("background","red");
				}
				tem++;
			},100)
		})
	</script>
</html>