admin 管理员组

文章数量: 887006

日常练习

html

<html>
<head>
<meta charset="utf-8">
<title>抽奖web</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=".3.1/css/bootstrap.min.css"><script src=".2.1/jquery.min.js"></script><script src=".js/1.15.0/umd/popper.min.js"></script><script src=".3.1/js/bootstrap.min.js"></script>
</head>
<body background=";quality=100&size=b4000_4000&sec=1588772845&di=207b5ab133cb84f363ba5e96e38e9e89&src=.jpg"><center><h1>抽奖程序</h1></center><br><div class="container-fluid"><div class="row"><div class="col-sm-8"><div><div class="form-group"><label for="comment">参与抽奖人员【例如张三18888888888-李四18888888888-……】</label><textarea class="form-control" rows="5" id="User"></textarea></div><div>抽出几个：<input type="number" name="successUserNumber" id="randomNumber"><button id="start" onclick="startRun()">开始抽奖</button><button onclick="stop()">停止</button><button onclick="location.reload()">重新抽奖</button></div></div><center><h1 id="randomUser"></h1><h1 id="successUser"></h1></center></div><div class="col-sm-4"><div class="parent"><div class="child"><table class="table"><thead><tr><th>参与抽奖人员</th></tr></thead><tbody id="tableuser"></tbody></table></div></div></div></div>
</div>
</body>
</html>

js and css：

<style type="text/css">
.parent{position:relative;height:150%;//高度根据需求自行设定
}
.child{position:absolute;left:0;top:0;right:0;bottom:0;  //left,top,right,bottom都为0，充满真个页面overflow-y:auto;overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
}
</style>
<script type="text/javascript">
var userArray=new Array();//定义用户数组
var timer;
var outUser;
var randomNumber;
var user;
function startRun() {$('#successUser').html('');var inUser=document.getElementById('User').value.split('-')randomNumber=document.getElementById('randomNumber').value$('#start').attr({"disabled":"disabled"});//保证一次点击一次抽奖防止死循环for (i=0;i<inUser.length;i++) {userArray[i]=inUser[i]user+='<tr><td>'+inUser[i]+'</td></tr>'}$('#tableuser').html(user);outUser=shuffle(userArray);timer=setInterval("randomShow()",10);
}
function shuffle(arr) {//著名的洗牌算法，原理就是遍历数组元素，将当前元素与随机抽取的一个剩余元素进行交换。for (let i=arr.length-1; i>=0; i--) {let rIndex = Math.floor(Math.random()*(i+1));// 打印交换值// console.log(i, rIndex);let temp = arr[rIndex];arr[rIndex] = arr[i];arr[i] = temp;}return arr;
}
function randomShow(){pcount = userArray.length - 1;num = Math.floor(Math.random() * pcount);html=userArray[num]$('#randomUser').html(html)
}
function stop(){let html=''clearInterval(timer);//$('#start').removeAttr('disabled');$('#randomUser').html('');for(i=0;i<randomNumber;i++){var number=i+1html+='<br><span class="badge badge-success">第'+number+'名-----'+outUser[i]+'</span><br>'}$('#successUser').html(html);
}
</script>


学习阶段，代码可能有些冗余。

本文标签： 日常练习

版权声明：本文标题：日常练习 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732350831h1532999.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。