最近在绵阳职业技术学院带物联网专业实训,在最后做小组项目答辩的时候,为了公平公正写了一个随机排序的一个网页,在此保存方便以后使用。
写的比较仓促,完成了功能,代码规范有所欠缺,提供思路给大家分享。
<!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
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

