实现功能:
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>