jquery模拟九宫格抽检

最新推荐文章于 2022-06-13 09:31:39 发布
最新推荐文章于 2022-06-13 09:31:39 发布
阅读量391 收藏
点赞数
分类专栏： js 前端网页优化 Jquery 文章标签： jquery js web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viser123/article/details/51548033
版权

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

viser123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Lottery1.1.0九宫格抽奖插件最新版
07-10
作者本人闲来无事，正好朋友需要做抽奖转盘特效，因缘际会之下，打算自己动手写一个插件玩玩，素材都是用的网络上面的，看见相同的图片大家别介意。 该插件支持自定义九宫格转盘的高宽奖品数量，Demo里面自带三个不同尺寸的Demo页面：3X3、4X3、4X4；如果不能满足需求，可自行定制，详情请阅读lottery.js里面的注释内容。 这个插件是作者独立完成的第一个插件，仅作练手，还有诸多瑕疵；欢迎大家拍砖，帮助我完善她！
JQUERY实现九宫格效果
09-21
jq实现九宫格效果类似百度页面，这是附件来着，只为存储查看https://mp.csdn.net/console/editor/html/108702724
页面布局分成9块（九宫格）
zhangyongbink的博客
04-21 1958
页面布局九宫格
JS九宫格抽奖
weixin_43853424的博客
12-13 4264
注：此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站，js内容主要是根据自己所学去写的 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; ul{ m
jquery九宫格抽奖转盘插件lottery
锦锦_jane的博客
09-08 1146
jquery九宫格抽奖转盘插件lottery 最近遇到一个需求是让做一个抽奖转盘 上网查了一下，找到一个插件lottery.js，修改了一下，拿来用，感兴趣的可以看一下 要求：由前端随机产生奖品，最多一次抽到谢谢惠顾，每次奖品不能重复 抽奖示例 主要的html结构 <ul class="lotteryList" id="lottery"> <li class="item active lottery-unit lottery-unit-0"> &lt
javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）
m0_56726855的博客
06-13 4112
最近突然想起来win7自带的拼图小游戏，现在已经玩不到了，于是便想自己实现一个，用了几天闲暇时间，终于捣鼓出来了。游戏使用js和jquery实现。
九宫格抽奖停止位置的设置
脚步不停，信念不息！
05-31 5529
控制九宫格抽奖停止         网上有很多文章介绍九宫格抽奖，最近在做一个活动，正好用到了九宫格抽奖。网上的文章中都提供了比较完整的js和html，只需要将js、html复制下来，添加需要的jQuery的引用（下载很简单），放到环境中，几乎都能跑起来。          但在开发中，发现一个问题，网上的js提供了九宫格旋转的控制代码，同时也有一个随机数的生产，来达到随机抽奖的效果。而真
jquery实现九宫格大转盘抽奖
10-23
jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数
Jquery九宫格效果
04-13
Jquery九宫格效果,支持全部浏览器，效果还是不错啦，(*^__^*) 嘻嘻……
jQuery手机九宫格幸运抽奖代码
06-10
一款相当不错的jQuery手机九宫格幸运抽奖代码，手机端网站抽奖活动页面九宫格随机抽奖代码。
jQuery手机九宫格抽奖活动页面代码.zip
最新发布
12-17
一款界面精美的jQuery手机九宫格抽奖活动页面代码，随手狂欢移动端商城九宫格抽奖专题模板。
页面向下滑动实现div显示和隐藏
viser123的博客
04-19 9341
Title heheh $(document).ready(function(){ var min_height = 100; $(window).scroll(function(){ var s =$(window).scrollTop(); if(s > min_height){ $("#div").show() }else{ $("#div").hi
AJAX+PHP+MYSQL实现登录页面
viser123的博客
04-19 2621
前端页面         ajax提交数据                     * {             margin: 0;             padding: 0;             box-sizing: border-box;         }         .box {             widt
jquery随笔小特效之唯品会顶部菜单栏
viser123的博客
03-27 1514
我感觉代码还是有点繁琐，应该可以跟简便一点的                           vip导航效果 * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } .nav { width: 660px; height:30px; ba
js实现敏感字查询
viser123的博客
11-15 875
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>敏感字查询title> script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">/script> script src="lodash.min.js">/script> scr
jquery实现左右列表项跳跃
viser123的博客
05-31 438
这是有中间按钮的 Title body , ul , li , div { margin: 0; padding:0; box-sizing: border-box; } body div { width: 100px; height: 200px; border: 1px solid #666666; margin: 5% 2%; floa
viser_1
viser123的博客
08-11 408
这段时间忙了很多东西，差不多也知道一个完整的模块的上线的一些从数据收集到开发的种种，学到了很多实际的东西，中间走的很多弯路就是因为前期的准备工作不够充分，只是拿到项目就急着做好，到最后就会全神贯注的推翻之前的东西，在前端开发的时候分析需求才是最重要的，其实一些效果或者页面的数据交互花费的时间和精力其实不多，最后改的时候才是崩溃的，今年下半年的目标就是好好看下node.js，毕竟如果一点点后端都不懂
css3 + jquery模拟时钟效果
viser123的博客
05-31 349
干货 模拟时钟 body, div { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 300px; height: 300px; margin: 120px auto; background: url("images/20213d50b825d729db533ff8fb
微信点击九宫格怎么跳转到对应侧边导航栏
06-02
1. 在微信九宫格中添加链接，链接到相应的页面。 2. 在侧边导航栏中添加对应的锚点，锚点名称与链接中的锚点名称一致。 3. 使用JavaScript监听点击事件，当用户点击九宫格时，获取相应锚点的位置，并滚动到该位置。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值