jquery模拟九宫格抽检

原创 2016年05月31日 18:19:02

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

版权声明:本文为博主原创文章,但是为了方便学习可以随意转载。

Android 实例:九宫格图案解锁,"程序锁"模拟场景使用

一、简介该实例应用一打开,首先进入”欢迎页” WelcomeActivity,然后判断SharePreference中“是否设置了密码”。 若未设置密码,进入SetLockActivity进行密码的设...
  • u014136472
  • u014136472
  • 2015年11月15日 18:13
  • 1351

基于java的九宫格求解程序。以荷兰数学家设计的世界最难九宫格为例。

今日,一则腾讯的新闻称中国老头三天破解世界最难九宫格,虽然最后老人是改了一个数字,但是引起本人一时兴趣,想通过计算机程序求解该问题,于是在宿舍呆了一下午,终于成功求解,程序源码如下。 package...
  • liuhenghui5201
  • liuhenghui5201
  • 2013年05月29日 00:21
  • 5000

用jQuery UI做简单九宫格拼图(2)

上一篇中介绍了一个简单的拼图。缺点是图片只要放对位置,就不会再被拖动。现在我们可以把这个拼图的代码稍加修改,给它增加一些难度。(改动的代码我会用注释的方式作为比较和参考。) 继续沿用上一篇中的H...
  • jyee721
  • jyee721
  • 2014年07月05日 21:02
  • 811

-jQuery图片九宫格样式鼠标悬停图片滑动切换效果

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果          有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的 [html] vie...
  • SHIZHONGYUO
  • SHIZHONGYUO
  • 2014年05月21日 20:21
  • 1251

达人篇:3.1.1)全检和抽检的差别(注意点);

本章目的:明白全检和抽检的定义,及其中的坑。 写在前: 量产时供应商送来的一批检测合格的零件中,有不合格零件的存在么? 请把答案当成是:yes! 1.全数检验(One hundred perc...
  • zjc314
  • zjc314
  • 2017年07月25日 06:09
  • 488

html5九宫格布局

html5响应式九宫格
  • u012260672
  • u012260672
  • 2016年03月18日 13:15
  • 2781

九宫格抽奖停止位置的设置

控制九宫格抽奖停止         网上有很多文章介绍九宫格抽奖,最近在做一个活动,正好用到了九宫格抽奖。网上的文章中都提供了比较完整的js和html,只需要将js、html复制下来,添加需要的jQ...
  • wangqingbo0829
  • wangqingbo0829
  • 2016年05月31日 23:10
  • 2224

Jquery的模拟事件,input模拟focus

常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。 在JQuery中,可以使用trigger()方法完成模拟操作...
  • StarsInSun
  • StarsInSun
  • 2014年08月14日 09:34
  • 2541

使用jQuery模拟鼠标点击a标签事件

[文章作者:磨延城 转载请注明原文出处: http://mo2g.com/view/42/ ] 我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。...
  • daijiguo
  • daijiguo
  • 2015年09月28日 10:55
  • 3210

使用jQuery 模拟鼠标点击a标签事件 实现定位

在后台添加商品列表时发现过长不方便,
  • oqqYeYi
  • oqqYeYi
  • 2014年05月16日 14:18
  • 2443
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery模拟九宫格抽检
举报原因:
原因补充:

(最多只允许输入30个字)