关闭

jquery模拟九宫格抽检

标签: jqueryjs web前端
128人阅读 评论(0) 收藏 举报
分类:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟九宫格抽奖</title>
<link rel="stylesheet" href="css/index.css">
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<div class="box">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="list_0">
<img src="images/3.png" alt="">
</td>
<td class="list_1">
<img src="images/2.png" alt="">
</td>
<td class="list_2">
<img src="images/3.png" alt="">
</td>
<td class="list_3">
<img src="images/4.png" alt="">
</td>
</tr>
<tr>
<td class="list_11">
<img src="images/5.png" alt="">
</td>
<td colspan="2" rowspan="2">
<span class="cli"></span>
</td>
<td class="list_4">
<img src="images/6.png" alt="">
</td>
</tr>
<tr>
<td class="list_10">
<img src="images/7.png" alt="">
</td>
<td class="list_5">
<img src="images/8.png" alt="">
</td>
</tr>
<tr>
<td class="list_9">
<img src="images/1.png" alt="">
</td>
<td class="list_8">
<img src="images/3.png" alt="">
</td>
<td class="list_7">
<img src="images/1.png" alt="">
</td>
<td class="list_6">
<img src="images/3.png" alt="">
</td>
</tr>
</table>
</div>
<script>
var prize = ["谢谢参与", "iPad", "谢谢参与", "球鞋男鞋", "娃娃", "三星手机", "谢谢参与", "苹果耳机", "谢谢参与", "苹果耳机", "苹果手机", "耐克女鞋"];
var speed = 200;//起始速度
var count;//旋转基数圈数
var luckyNum;//获奖位子
var num = -1;//起始位子
$(function () {
$(".cli").click(function () {
LuckyDraw();
});
});
//初始化
function LuckyDraw() {
count = Math.round(3 + Math.random() * 2) * 12;
luckyNum = Math.round(Math.random() * 12) + count;
console.log(count);
num = -1;
LuckyGo();
}
//抽奖函数
function LuckyGo() {
num += 1;
if (num < count / 4){
speed = Math.max(500 - 40 * num, 100);
}
else if (num < count * 7 / 8 && num >= count / 4) {
speed = 100;
} else {
speed = 100 + 30 * (num - Math.round(count * 7 / 8));
}
var listnum = "list_" + num % 12;
$("tr td").removeClass("active");
$('.' + listnum).addClass("active");
if (num < luckyNum) {
setTimeout(LuckyGo, speed);
}
if (num == luckyNum) {
var luckn = luckyNum % 12;
alert("恭喜你获得" + prize[luckn]);
}
}
</script>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8043次
    • 积分:388
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:4篇
    • 译文:4篇
    • 评论:1条
    最新评论