随机点名系统

最新推荐文章于 2022-04-22 14:17:27 发布

#不许人间见白头#

最新推荐文章于 2022-04-22 14:17:27 发布

阅读量431

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45936406/article/details/107646972

版权

前端小项目专栏收录该内容

5 篇文章 0 订阅

订阅专栏

随机点名系统

<html>
	<head>
		<title>随机点名系统</title>
		<style type="text/css">
			body{
				background-color:pink;
			}
			h1{
				text-align:center;
			}
			#btn{
				width: 100px;
				height: 30px;
				//margin-left: 600px;
				//margin-top: 50px;
				margin:50px 600px ;
				background:hotpink;
				
			}
			.box{
				width: 1000px;
				height: 260px;
				margin: 0 auto;
				margin-top: 100px;
				clear: both;
			}
			.name{
				width: 100px;
				height: 30px;
				float: left;
				background-color: antiquewhite;//颜色为仿古白
				margin-left: 10px;
				margin-top: 10px;
				text-align: center;
				line-height: 30px;
				margin:10px 10px;
				
			}
			#btn:hover{
					background:pink;
				}
		
		
		</style>
	</head>
	<body>
		<h1>随机点名系统</h1>
		<div class="box" id="box"></div>
		<input type="button" value="点名" id="btn">
		<script type="text/javascript">
			var timeId;
			var total=37;
			//var arrs=["1","2","3","4","5","6","7","8",
			//"9","10","11","12","13","14","15","16","17","18"
			//,"19","20","21","22","23","24","25","26","27","28"
			//,"29","30","31","32","33","34","35","36","37"];
			var boxNode=document.getElementById("box");
			for(var i=0;i<total;i++){
				//动态生成div
				var divNode=document.createElement("div");
				//divNode.innerHTML=arrs[i];
				if(i<9){
					divNode.innerHTML="0"+(i+1);
				}else{
					divNode.innerHTML=i+1;
				}
				divNode.className="name";
				boxNode.appendChild(divNode);
			}
		  var btn=document.getElementById("btn");
		  btn.onclick=function(){
			if(this.value=="开始"){
				    timeId=setInterval(function(){
					for(var j=0;j<total;j++){
						boxNode.children[j].style.background="";
					};
					var random=parseInt(Math.random()*total+1);
					boxNode.children[random].style.background="red";
				},0);
				this.value="停止";
			}else{
				clearInterval(timeId);
				this.value="开始";
			}
		  }
				
		</script>
	</body>
</html>