最近在绵阳职业技术学院带物联网专业实训,在最后做小组项目答辩的时候,为了公平公正写了一个随机排序的一个网页,在此保存方便以后使用。

写的比较仓促,完成了功能,代码规范有所欠缺,提供思路给大家分享。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>随机</title>
	<link rel="stylesheet" href="">
	<style>
		*{margin:0;padding: 0;}
		body{background-color: pink;}
		#show{width: 600px;height: 200px;text-align: center;margin:auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
		.listname{width: 250px;height: auto;position: fixed;right: 10px;top: 20px;background-color: #FFF;}
		ul{width: 100%;height: auto;list-style-type:none;}
		li{width: 100%;text-align: center;margin-top: 5px;}
		.showname{width: 100%;height: 140px;line-height: 140px;background-color: #fff;font-size: 60px;}
		.goinput{width: 100%;height: 60px;font-size: 30px;cursor:pointer;}
	</style>
</head>
<body>
	<div id="show">
		<div class="showname" id="myshowname"></div>
		<input type="button" value="开   始" class="goinput" onclick="getName()" id="gobutton">
	</div>
	<div class="listname">
		<ul id="pxmd">
			<li><h2>随机名单</h2></li>
			
		</ul>
	</div>
</body>
<script>
	//被抽取名单
	var arr =['1组-侯世民','2组-王能','3组-黄浩','4组-姚彬','5组-冯磊'];
	var showi = 0;//循环
	var showq = 0;//圈
	var showqc = 0;//取出
	//获取序列
	var showname = document.getElementById("myshowname");
	//排序名单
	var pxmd = document.getElementById("pxmd");
	//定时
	var pqq;
	var gobutton = document.getElementById("gobutton");
	function getName(){ 
		gobutton.style.display="none"; 
		sjsz();
		pqq = setInterval("gosh()",100);
	}

	function gosh(){
			showname.innerHTML=arr[showi];
			showi++;
			if(showi == arr.length){
				showq++;
				showi=0;
			}
			if(showq == 15){
				var html = pxmd.innerHTML;
				pxmd.innerHTML = html + "<li><h3>"+arr[showqc]+"</h3></li>";
				showname.innerHTML = arr[showqc];
				showqc++;
				showq=0;
				clearInterval(pqq);
				setTimeout(function(args) {
					pqq = setInterval("gosh()",100);
				}, 3000);
			}
			if(showqc == arr.length){
				clearInterval(pqq);
				/*gobutton.style.display="block"; */
			}
	}

	function sjsz(){
		var t;
		for(var i = 0;i < arr.length; i++){
		  var rand = parseInt(Math.random()*arr.length);
		     t = arr[rand];
		     arr[rand] =arr[i];
		     arr[i] = t;
		}
	}
</script>
</html>

点击源码下载

最后修改于 2019-07-16 15:02:50
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇