全部代码,把数据源换成人名就行,写的比较乱,但能跑。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="bootstrap.css"> -->
<link rel="stylesheet" href="bootstrap.css">
<style>
*{margin: 0px;padding: 0px;}
/* li{list-style: none;} */
body{
font-family: "楷体";
user-select:none;
background: url('2.jpg') no-repeat;
background-size:100%;
/*background-color: red;*/
}
.section{
position: relative;
width:1205px;
height: 560px;
background-color: rgba(0,0,0,.3);
margin:165px auto 0;
text-align: center;
}
.section h2{
height: 90px;
line-height: 90px;
font-size: 40px;
color:#fff;
}
.section .s-result{
height: 400px;
color: #fff;
}
.s-result .number{
float: left;
width: 895px;
height: 300px;
line-height: 300px;
margin-left: 20px;
font-size: 60px;
font-weight: bold;
}
.btn p{
line-height: 81px;
font-size: 50px;
color: #fff;
}
tr{
font-size: 54px;
height: 102px;
line-height: 102px;
}
</style>
</head>
<body>
<div class="section">
<h2>看看谁最幸运!!!</h2>
<div class="s-result">
<table class="table table-bordered">
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<audio autoplay="autoplay">
<source src="纯音乐-Victory (Film Music Prague现场).mp3" type="audio/ogg" />
</audio>
<div>
<a class="btno btn btn-primary">点 击 开 始</a>
<a class=" btnu btn btn-primary">点 击 停 止</a>
</div>
</div>
<div >
</div>
</div>
<script>
var res=false;
var dis = 1;
var oBtn = document.getElementsByClassName('btno')[0];
var uBtn=document.getElementsByClassName('btnu')[0];
var oResult = document.getElementsByClassName('s-result')[0];
//数据源
var arrName = ["1", "2", "3", "4", "5",
"6", "7","8", "9", "10", "11","12","13","14",
"15","16","17","18","19","20","21","22","23",
"24","25","26","27","28","29","30","31","32",
"33","34","35","36","37","38","39" ]; //抽签的内容
var step = 1;
var cnt = 1;
var flag = true;
//开始
oBtn.onclick = function (){
res=false;
if(flag){
step = 1;
creatName();
flag = false;
}else{
step = 1;
creatName();
}
}
//停止
uBtn.onclick=function(){
res=true;
}
//随机抽取一个人名
function getName(){
var num = Math.floor(Math.random()*(38));
var n = arrName[num];
return n;
}
function creatName(){
if(step > cnt){
return null;
}
step++;
var oDiv = document.createElement('div');
oDiv.className = 'number';
oResult.appendChild(oDiv);
var maxDis = 10;
// alert(dis);
var mySet = setInterval(function(){
if(res){
// oDiv.innerHTML = getName();
if(dis){
var td=document.getElementsByTagName('td');
for(var i=0;i<td.length;i++)
{
var name=getName();
var num=0;
for(var j=0;j<td.length;j++)
{
if(td[j].innerText==name)
{
num++;
}
}
if(num>0){
}
else
{
td[i].innerText=name;
}
}
dis++;
}
else
{
var td=document.getElementsByTagName('td');
for(var i=0;i<td.length;i++)
{
td[i].innerHTML = Birthday[i];
}
}
clearInterval(mySet);
creatName();
return null;
}else{
var td=document.getElementsByTagName('td');
for(var i=0;i<td.length;i++){
td[i].innerHTML = getName();
// console.log(dis);
}
}
},50);
}
</script>
</body>
</html>