抽奖 | 易学教程

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

来源：https://www.cnblogs.com/tcq43356/p/11586677.html

标签

winner