<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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body background="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588772845&di=207b5ab133cb84f363ba5e96e38e9e89&src=http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/19/1f671b65310564cdc8f42b67f9c8b0b9.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和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+1 html+='<br><span class="badge badge-success">第'+number+'名-----'+outUser[i]+'</span><br>' } $('#successUser').html(html); } </script>
