这是公司活动要求写的一个，两组人随机对战，要的比较急，从网上找的一个抽奖插件改的
插件地址：http://sc.chinaz.com/jiaoben/160604238680.htm
选个背景图；输入选手名就可用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>比赛</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
width: 100%;
max-width: 1920px;
height: auto;
position: relative;
}
.bg img {
width: 100%;
height:660px;
}
.box {
width: 90%;
/* max-width: 1000px; */
margin: auto;
text-align: center;
position: absolute;
top: 25%;
left: 0;
right: 0;
}
.jz {
height: auto;
margin: auto;
}
.jz p {
line-height: 70px;
text-align: center;
font-size: 50px;
color: #ffffff;
margin-top: -170px;
margin-left: 60px;
}
.jz span {
/* width: 240px; */
height: 80px;
line-height: 80px;
margin: 20px 0;
text-align: left;
font-size: 60px;
background: rgba(216, 160, 160, 0.4);
font-weight: bold;
font-family: DFKai-SB;
}
.name {
position: absolute;
left: 100px;
top: 145px;
color: #fff;
font-family: DFKai-SB;
}
.phone {
position: absolute;
right: 0px;
top: 145px;
color: #fff;
font-family: DFKai-SB;
}
.start,
.stop {
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 64px;
border-radius: 10px;
margin: auto;
color: #ffffff;
cursor: pointer;
font-family: DFKai-SB;
}
.start {
background: #24ADD7;
position: absolute;
top: 390px;
left: 44%;
font-family: DFKai-SB;
}
.stop {
background: #FC6666;
position: absolute;
top: 390px;
left: 44%;
font-family: DFKai-SB;
}
.zjmd {
color: #fff;
height: 350px;
margin-top: 30px;
margin-left: 30px;
overflow: hidden;
margin: 10px auto;
position: absolute;
top: 300px;
right:0px;
font-family: DFKai-SB;
}
.zjmd .p1 {
width: 200px;
height: 30px;
text-align: center;
/* margin: 0 auto; */
color:#000;
background: rgb(247, 200, 49);
font-size:22px;
font-weight: bold;
font-family: DFKai-SB;
}
.list p {
width: 200px;
height: 30px;
text-align: center;
margin: 0 auto;
background: #DF680C;
text-indent: 10px;
font-family: DFKai-SB;
font-size:20px;
}
.zjmd p {
line-height: 30px;
text-align: left;
text-align: justify;
font-family: DFKai-SB;
}
</style>
<body>
<div class="bg">
<img src="style/bg.jpg">
</div>
<div class="box">
<div class="jz">
<p>
<b style="font-family: DFKai-SB; font-size:70px;">象棋对战</b>
</p>
<span class="name">选手1</span>
<span class="phone">选手2</span>
<div class="start" id="btntxt" onclick="start()">开始</div>
</div>
<div class="zjmd">
<p class="p1">对战顺序表</p>
<div class="list">
</div>
</div>
</div>
<script type="text/javascript" src="style/jquery-1.8.0.js.js"></script>
<script type="text/javascript">
var xinm = new Array();
xinm[0] = "1"
xinm[1] = "2"
xinm[2] = "3"
var phone = new Array();
phone[0] = "一"
phone[1] = "二"
phone[2] = "三"
var nametxt = $('.name');
var phonetxt = $('.phone');
var pcount = xinm.length - 1;
var pcount2 = phone.length - 1;
var runing = true;
var td = 3;
var num = 0;
var i=0;
var t;
function start() {
if (runing) {
runing = false;
$('#btntxt').removeClass('start').addClass('stop');
$('#btntxt').html('停止');
startNum()
} else {
runing = true;
$('#btntxt').removeClass('stop').addClass('start');
$('#btntxt').html('开始');
stop();
zd();
}
}
//循环参加名单
function startNum() {
num = Math.floor(Math.random() * pcount);
i=Math.floor(Math.random() * pcount2)
nametxt.html(xinm[num]);
phonetxt.html(phone[i]);
t = setTimeout(startNum, 0);
}
//停止跳动
function stop() {
pcount = xinm.length - 1;
pcount2 = phone.length - 1;
clearInterval(t);
t = 0;
}
//从一等奖开始指定前3名
function zd() {
if (td > 0) {
//打印中奖者名单
$('.list').prepend("<p>" + td + ' ' + xinm[num] + " -- " + phone[i] + "</p>");
if (pcount <= 0) {
// alert("结束");
}
//将已中奖者从数组中"删除",防止二次中奖
xinm.splice($.inArray(xinm[num], xinm), 1);
phone.splice($.inArray(phone[i], phone), 1);
}
td = td - 1;
}
</script>
</body>
</html>