如何实现随机点名器

最新推荐文章于 2025-04-17 13:41:59 发布

钢铁直男T_T

最新推荐文章于 2025-04-17 13:41:59 发布

阅读量1.8k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45683240/article/details/126324164

版权

有一次老师给我布置了一个作业，使用html+css+javaScript实现一个炫酷实用的随机点明器网页版。我当时觉得挺有意思的，然后在在网上搜了一下，结果在网上搜的都没有达到自己的要求。所以自己费了将近一天的时间自己做了个简单的但是自己觉得还算可以的网页版点名器。效果图如下所示：

首先，这个点名器可以展示头像，还有动态的类似于抽奖的效果，操作简单，点击点名就可以等待点名结果了。有效解决了老师的点名困难症。

下面展示主要实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#title{
				width: 300px;
				height: 150px;
				margin-left: 500px;
				margin-top: 20px;
			}
			#ti_left{
				width: 120px;
				height: 150px;
				float: left;
				border: 4px solid orange;
			}
			#ti_right{
				width: 150px;
				height: 100px;
				/*background-color: green;*/
				float: left;
				margin-left: 20px;
				text-align: center;
			}
			#ti_left img{
				width: 100%;
				height: 100%;
			}
			#person{
				font-size: 30px;
				font-weight: bold;
				color: red;
				text-align: right;
			}
			#content{
				width: 1200px;
				height: 600px;
				/*background: yellow;*/
				margin-left: 150px;
				margin-top: 20px;
				/*border: 1px solid red;*/
				
			}
			#con_left{
				width: 800px;
				height: 1000px;
				border: 1px solid red;
				float: left;
			}
			#con_right{
				width: 200px;
				height: 300px;
				border: 1px solid blue;
				float: left;
				margin-left: 50px;
				text-align: center;
			}
			#list{
				width:100%;
				height: 100%;
				
			}
			#list li{
				width: 80px;
				height: 130px;
				float: left;
				margin-left: 20px;
				/*border: 1px solid red;*/
				text-decoration: none;
				list-style: none;
				margin-top: 20px;
				margin-right: 20px;
				text-align: center;
			}
			#list li img{
				width: 100%;
				height: 80%;
			}
			.checked{
				color: red;
				font-size: 20px;
				font-weight: bold;
				background-color: yellow;
			}
			.unchecked{
				 color: black;
				background-color: white;
			}
			
		</style>
		
	</head>
	<body>
		<div id="title">
			<div id="ti_left">
				<img  src="img/学生.jpg"/>
			</div>
			<div id="ti_right">
			<p> 幸运学生</p>
			<span id="person">
				暂无
			</span>
			</div>
		</div>
		
		<div id="content">
			<div id="con_left">
				<ul id="list">
				</ul>
			</div>
			<div id="con_right">
				<h3>随机点名器</h3>
				<button id="start">开始点名</button>
			</div>
		</div>
		<script type="text/javascript">
		//定义学生名单
		var sname=["百里守约","陈咬金","大乔","东皇太一","高渐离","李信","露娜","女娲","司马懿","孙策","王昭君","武则天","小乔","瑶瑶","虞姬","钟馗"];
		//对应学生名单生成li
		for(var i=0;i<sname.length;i++){
			var oli=document.createElement("li");
			oli.innerHTML="<img src='img/"+sname[i]+".jpg'><span>"+sname[i]+"</span>";
			var oUl=document.getElementById("list");
			oUl.appendChild(oli);
		}
		//定义颜色变换的数组，里面也可以换成样式名，可能会更好一点
		var colors=["red","white"];
		var styles=["checked","unchecked"];
		var oBtn=document.getElementById("start");
		var oUl=document.getElementById("list");
		var oliArr=oUl.getElementsByTagName("li");
	   
		  //timer用于定时器
		  var timer=null;
		  //i用于计数
		  var i=0;
		  var index=0;
		  //定义速度
		  var speed=50;
		  //点击开始按钮
	  oBtn.onclick=function(){
	  		 
	  		oBtn.innerHTML="运行中..";
	  	  var n=Math.floor(Math.random()*sname.length+(2*sname.length));
	  		console.log(n);
	  		clearAll();//清除所有样式
	  		//每隔一秒切换一次背景颜色
	  		clearInterval(timer); //清除timer
	  	timer=setInterval(function(){
 
	  		if(index<n){
	  		oliArr[index%sname.length].className=styles[i];
	  		i++; //i加一，如果i是偶数，则代表当前li已经变换两次，完成一个选中。然后index++;
	  		if(i%2==0){index++;}
	  		i=i%colors.length;
	  		}else{  //如果index==n，就消除定时器，显示选中的人和图片。
	  			closeInter();  //关闭定时器，定格到指定目标
	  			oBtn.innerHTML="开始点名";
				var ti_left=document.getElementById("ti_left");
				ti_left.innerHTML="<img  src='img/"+sname[index%sname.length]+".jpg'/>";
				var oper=document.getElementById("person");
				oper.innerHTML=sname[index%sname.length];
	  		}
	  		},speed);  //50毫秒的速度
	  		
	  
	  }
	  function closeInter(){
		oliArr[index%sname.length].className=styles[0];
	  	clearInterval(timer);
	  }
	  function clearAll(){
		oliArr[index%sname.length].className=styles[1];
		document.getElementById("ti_left").innerHTML="<img  src='img/学生.jpg'/>";
		document.getElementById("person").innerHTML="暂无";
		speed=50;
	  	index=0;
	  }
	 
		</script>
		
	</body>
</html>