| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
|
| |
<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> |
| |
<script src="jquery-3.4.1.js"></script> |
| |
<style> |
| |
.container { |
| |
width: 970px; |
| |
margin: 0 auto; |
| |
} |
| |
|
| |
header { |
| |
text-align: center; |
| |
width: 150px; |
| |
height: 130px; |
| |
margin: 0 auto; |
| |
font-size: 45px; |
| |
line-height: 130px; |
| |
} |
| |
|
| |
.luckyPeople { |
| |
height: 150px; |
| |
border: 3px solid red; |
| |
text-align: center; |
| |
line-height: 150px; |
| |
font-size: 128px; |
| |
} |
| |
|
| |
.btn, |
| |
.common, |
| |
.winner { |
| |
width: 150px; |
| |
margin: 10px auto; |
| |
text-align: center; |
| |
font-size: 20px; |
| |
} |
| |
|
| |
button { |
| |
cursor: pointer; |
| |
} |
| |
|
| |
.winner { |
| |
font-size: 32px; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
<div class="container"> |
| |
<header id="header">中奖人</header> |
| |
<div class="luckyPeople" id="luckyPeople"></div> |
| |
<div class="btn"> |
| |
<button id="start">开始</button> |
| |
<button id="end" disabled>停</button> |
| |
</div> |
| |
<div class="common">一等奖(1名)</div> |
| |
<div class="winner"></div> |
| |
<div class="common ">二等奖(1名)</div> |
| |
<div class="winner"></div> |
| |
<div class="common">三等奖(1名)</div> |
| |
<div class="winner"></div> |
| |
</div> |
| |
|
| |
<script> |
| |
let drawName = ['张三', '李四', '王二', '程亮', '陈亮宇', '孙悟空', '柳生', '何键', '范卡', '小小', '胡石', '石可']; |
| |
let insideName = ['李四', '张三', '王二']; |
| |
let isClick = true;// 暗门 |
| |
let stop; |
| |
let stochasticperson; |
| |
function person() { |
| |
stochasticperson = drawName[Math.floor(Math.random() * drawName.length)]; |
| |
return stochasticperson; |
| |
} |
| |
$("#start").click(() => { |
| |
stop = setInterval(function () { |
| |
//获取随机的人 |
| |
person(); |
| |
$("#luckyPeople").text(stochasticperson); |
| |
}, 50) |
| |
$("#start").attr("disabled", "true"); |
| |
console.log($("#end")); |
| |
$("#end").removeAttr("disabled") |
| |
}) |
| |
$("#end").click( |
| |
function () { |
| |
clearInterval(stop); |
| |
$("#end").attr("disabled", "ture"); |
| |
//内部中奖名单，当暗门开启时 |
| |
$("#start").removeAttr("disabled"); |
| |
if (isClick) { |
| |
if ($(".winner").eq(2).text() == '') { |
| |
$("#luckyPeople").text(insideName[2]); |
| |
$(".winner").eq(2).text(insideName[2]); |
| |
|
| |
} else if ($(".winner").eq(1).text() == '') { |
| |
$("#luckyPeople").text(insideName[1]) |
| |
$(".winner").eq(1).text(insideName[1]); |
| |
|
| |
} else { |
| |
$("#luckyPeople").text(insideName[0]) |
| |
$(".winner").eq(0).text(insideName[0]); |
| |
} |
| |
} else { //随机抽取三名中奖人 |
| |
if ($(".winner").eq(2).text() == '') { |
| |
$("#luckyPeople").text(stochasticperson); |
| |
$(".winner").eq(2).text(stochasticperson); |
| |
|
| |
} else if ($(".winner").eq(1).text() == '') { |
| |
$("#luckyPeople").text(stochasticperson); |
| |
$(".winner").eq(1).text(stochasticperson); |
| |
|
| |
} else { |
| |
$("#luckyPeople").text(stochasticperson); |
| |
$(".winner").eq(0).text(stochasticperson); |
| |
} |
| |
} |
| |
|
| |
} |
| |
); |
| |
</script> |
| |
|
| |
|
| |
</body> |
| |
|
| |
</html> |