jQuery 抽奖模拟

实现功能：
1、点击按钮开始抽奖
2、到哪个奖项，哪个奖项背景变色
3、奖项显示在下方div中
4、奖项选择的次数随机
5、中奖随机

1、页面实现

<button type="button">开始抽奖</button>
<!-- rules="all"规定内侧边框的哪个部分是可见的 -->
<table border="" cellspacing="" cellpadding="" rules="all">
	<tr>
		<td>一等奖</td>
		<td>二等奖</td>
		<td>三等奖</td>
	</tr>
	<tr>
		<td>四等奖</td>
		<td>五等奖</td>
		<td>六等奖</td>
	</tr>
	<tr>
		<td>七等奖</td>
		<td>八等奖</td>
		<td>九等奖</td>
	</tr>
</table>
<div></div>

CSS实现

td {
	width: 60px;
	height: 40px;
}

在CSS中定义一个变色类名

.yel {
	background-color: yellow;
}

2、JS实现

<script src="../jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var n = 0;
	$("button").click(function() {
		// 定义随机选中几次
		var n = Math.ceil(Math.random() * 10+20);

		// 定义定时器，选中td
		var timer = setInterval(function() {
			// 删除类名，背景透明
			$("td").removeClass("yel");
			// 定义随机下标
			var r = Math.ceil(Math.random() * 8);
			// 对应下标td添加类名，背景变黄
			$("td").eq(r).addClass("yel");

			// 将td内容添加到div
			$("div").html($("td").eq(r).html());

			// 定时器每次启动，n--；
			n--;
			// 当n=0的时候,定时器停止
			if (n == 0) {
				clearInterval(timer);
			}
		}, 300);
	});
</script>