<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>
