开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery九宫格抽奖概率可控

基础概念

jQuery九宫格抽奖是一种常见的网页互动游戏，用户可以通过点击九宫格中的不同区域来参与抽奖。这种抽奖通常具有可控的概率，即可以设定每个区域中奖的概率。

相关优势

用户互动性强：九宫格抽奖能够吸引用户的注意力，增加用户与网站的互动。
概率可控：可以根据需求设定每个区域的中奖概率，确保抽奖的公平性和可控性。
易于实现：使用jQuery可以快速实现九宫格抽奖的效果。

类型

静态九宫格：九宫格的布局和内容是固定的。
动态九宫格：九宫格的内容可以动态变化，增加抽奖的趣味性。

应用场景

网站活动：在网站举办活动时，通过九宫格抽奖吸引用户参与。
电商促销：在电商平台上，通过九宫格抽奖促销商品。
游戏娱乐：在游戏或娱乐应用中，通过九宫格抽奖增加用户的参与度。

示例代码

以下是一个简单的jQuery九宫格抽奖示例，展示了如何实现概率可控的抽奖效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格抽奖</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
        }
        .grid div {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div data-probability="0.1">A</div>
        <div data-probability="0.2">B</div>
        <div data-probability="0.3">C</div>
        <div data-probability="0.1">D</div>
        <div data-probability="0.2">E</div>
        <div data-probability="0.1">F</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.grid div').click(function() {
                var probabilities = [];
                $('.grid div').each(function() {
                    probabilities.push(parseFloat($(this).data('probability')));
                });

                var totalProbability = probabilities.reduce((a, b) => a + b, 0);
                var random = Math.random() * totalProbability;
                var cumulativeProbability = 0;

                for (var i = 0; i < probabilities.length; i++) {
                    cumulativeProbability += probabilities[i];
                    if (random <= cumulativeProbability) {
                        alert('恭喜你抽中了：' + $(this).text());
                        break;
                    }
                }
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

概率计算错误：确保每个区域的中奖概率总和为1，否则会导致概率计算错误。
概率计算错误：确保每个区域的中奖概率总和为1，否则会导致概率计算错误。
随机数生成问题：确保使用Math.random()生成随机数，并且范围在0到1之间。
随机数生成问题：确保使用Math.random()生成随机数，并且范围在0到1之间。
元素选择问题：确保正确选择九宫格中的元素，并且每个元素都有data-probability属性。
元素选择问题：确保正确选择九宫格中的元素，并且每个元素都有data-probability属性。

通过以上方法，可以实现一个概率可控的jQuery九宫格抽奖效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【黄啊码】小程序：九宫格抽奖如何实现？可控制抽奖率

5,5,10,20,30,10,10,10})记住是按顺序的，所有的加起来等于100,images就是八张图片的地址，titles就是八个标题的内容 } }) }, //点击抽奖按钮

1.3K2 0

九宫格抽奖

九宫格抽奖，用到的不多，先看效果：因为变成gif的原因，看起来会有跳过一些，实际是不会的。...DOCTYPE html> 九宫格 ...3 4 抽奖.../js/jquery-3.1.1.min.js"> var divNum = document.getElementsByClassName('num');...style.background = '#fff'; }; } startBtn.onclick = function () { startBtn.innerText = "抽奖中

1.7K2 0

九宫格抽奖转盘

lottery.timer = setTimeout(roll,lottery.speed);//循环调用 } return false; } 3.将此抽奖网址集成在...APP上因为我们的需求是转盘抽奖用h5写，然后将此网址用APP加载，APP在加载时传入Token，后台在抽奖接口中判断此人积分是否可用抽奖，将抽奖结果回调给APP做弹框提示！...APP展示抽奖结果三.说明此抽奖参考文章：https://www.cnblogs.com/starof/p/4933907.html，因为用JQuery写的，本人知识匮乏，只能在此基础上修改成自己需要的

2.5K2 0

JavaScript 九宫格抽奖

图片这是之前国庆活动所做的一个新功能，以往抽奖都是采用转盘的形式，这次换了个新的玩法，折腾了两天才实现，主要代码出自哪里已经无法考究了，我做了部分优化，贴上来给大家参考下 HTML 结构代码 <ul...clearTimeout清除 speed: 100, //初始转动速度 times: 0, //转动次数 cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节...).on('click', '.rand_btn', function(){ if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮...that.rotateFunc(); // 转圈过程不响应click事件，会将click置为false click = true; // 一次抽奖完成后...，设置click为true，可继续抽奖 return false; } }) }, lotteryInit: function

2K7 0

vue简单实现九宫格抽奖

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 九宫格抽奖...key="index"> {{item.name}} 抽奖...{ name: "冰箱" }, ], flag: true,//是否开始抽奖...select: 0,//页面对应抽奖下标 timer: "", count: 0 }, methods

1.4K3 0

九宫格随机抽奖（html篇）

实现九宫格随机抽奖的方法还是有很多的，博主的方法仅供小伙伴们参考，还请多多指教！...一、代码思路实现：当点击中间的马上抽奖按钮，会自动开始顺时针跳转，并且能够随机慢慢地停止，然后弹出当前停止所获得的奖品1、CSS样式排版：（1）500*500px的带class:banner属性的金色边框...box = document.querySelectorAll('.box')var btn = document.querySelector('.btn')（3）整体变化操作①点击事件：为了实现无限次抽奖及抽奖过程中无法再点击抽奖按钮...count++; stop() }, span)}③停止：控制结束前变化速度的时间间隔，通过递归的方式循环定时器函数，以及最后的判断是否停止定时器，及重新设置为可再点击抽奖...award[index]); alert(award[index]);//延迟弹窗显示获得的奖品 },200) isclick = 0//设置为可再点击抽奖

2.5K11 0

【春节特辑】弹珠抽奖游戏概率

问题今天在逛街的时候发现这样一个抽奖游戏，六个杯子上面有六个出口，然后弹珠从顶上的出口丢进去，弹珠落在哪个出口，就能获得对应的奖品， 10 元丢一次。...有奖红包问题在文章开头的动画中，请问弹珠掉落在第二个杯子的概率是多少？

1.8K2 0

php实现根据概率配置随机抽奖

这是我写的一个比较简单的抽奖算法,并没有很严谨,用于我自己写的wap文字游戏(美味小镇)上的随机食材,可以设定概率值 <?php /** * Created by PhpStorm.... } } } $this->arr = $arr; return $this; } //返回概率...array(), $odds=0) { $arr||$arr = $this->arr; $odds||$odds = $this->odds; //概率数组循环... ), array( 'id'=>2, 'odds'=>10//相对概率值 ), array( 'id'=>3, ...'odds'=>200//相对概率值 ), ) 调用方法 $a = new Rand($arr); $a->action(1); 本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客

1.8K1 0

利用jquery Rotare实现抽奖转盘

相信大家对大转盘这个抽奖活动相当熟悉了吧，现在很多商家都会通过大转盘来进行商品的促销，有点事实体大转盘，有的是在网上进行的，有好多还是在微信平台进行大转盘抽奖活动，借此来推销自己的产品。...下面来看看如何通过jquery rotare来实现大转盘抽奖活动。首先一点是需要引入jquery Rotare这个js文件，本站提供下载链接。...="apple-mobile-web-app-status-bar-style" content="black" /> jquery.min.js

1.9K6 0

唤醒好运：JQuery 抽奖案例详解

本篇博客将通过详细解析 JQuery 抽奖案例，带领你走进一个富有情感色彩的好运之旅。开启奇妙之旅抽奖活动往往让人充满期待，仿佛站在一个充满神秘气息的门前，等待好运的降临。...在这次的 JQuery 抽奖案例中，我们将通过一系列的交互设计，打造一个引人入胜的抽奖页面。HTML 结构首先，我们需要创建一个简单的 HTML 结构，包括抽奖区域、奖品展示和抽奖按钮。JQuery 代码，实现抽奖的各个环节。JQuery 抽奖逻辑初始化奖品池在开始抽奖之前，我们需要定义一个奖品池，存放所有可能的奖品。这里我们使用一个数组表示奖品列表。...完整代码最终的 JQuery 抽奖案例代码如下：抽奖案例中，我们灵活运用了 JQuery 的各种功能，为用户呈现了一场生动的抽奖之旅。

3361 0

公平概率抽奖算法工具类分享

公平概率抽奖算法工具类分享支持按概率权重抽奖支持奖品动态增减支持泛型传参返回奖品依赖hutool工具类，可进一步改造成带库存的奖品，我这里暂时用不到库存就不改造了，有大佬改造好了请留言~ 工具类.../** * 抽奖，返回抽到的奖品 * @param prizeList 奖品列表 * @return T * @exception * @author...prizeList){ if (CollUtil.isEmpty(prizeList)){ return null; } //概率总和...NumberUtil.add(rateSum,NumberUtil.toBigDecimal(map.get("winnRate")+"")); } System.out.println("概率总和

1.5K2 0

简单jQuery九宫格

听朋友说要作个九宫格，我也就随便写一个，等待完善！！...button" value="9"/> jquery.../1.6.2/jquery.min.js" type="text/javascript"> var items="";...jQuery(function(){ $("input:button").each(function(index){ $(this).mouseover(function(){

1.1K10 0

一个九宫格抽奖的轮子

1, //当前转动到哪个位置，起点位置 speed: 300,//初始转动速度 times: 0,//转动次数 cycle: 50,//转动基本次数：即至少需要转动多少次再进入抽奖环节...false, //已经开始了，就不能进行第二次抽， callBack: null,//回调，轮子转完了得弹个什么框的 autoLuck: false // 默认是否点中间的start 开始抽奖...DOCTYPE html> 九宫格抽奖demo 抽奖序号..." id="prize" /> 开始抽奖 // index 的顺序

5092 0

Android自定义实现九宫格抽奖功能

最近的功能需求中需要实现用户使用签到获取的积分，可以在九宫格中进行抽奖消耗积分，这里使用的是自定义进行实现抽奖的功能，可以通过设置计算策略，来控制用户中哪些奖以及中大奖的概率，话不多说，直接上代码。...1.先看效果图 [lfp6e53jcm.gif] 在这里插入图片描述 2.自定义View实现九宫格抽奖功能 public class LuckyView extends View { private...OnLuckAnimationEndListener mLuckAnimationEndListener; /** * 可以通过对 mLuckNum 设置计算策略，来控制用户中哪些奖以及中大奖的概率...getApplicationContext(), msg, Toast.LENGTH_SHORT).show(); } }); } } 5，总结实现九宫格抽奖重点在自定义...需要Demo源码的童鞋可以在底部的公众号回复："九宫格抽奖"即可获取。 --- 小编整理了一份Android电子书籍，需要的童鞋关注公众号回复："e_books" 即可获取哦！

2.1K3 0

jquery.rotate.js实现转盘抽奖活动

DOCTYPE html> jqueryrotate积分抽奖效果演示 jquery...-2.1.4.min.js "> jquery.rotate/jquery.rotate.min.js

3.4K2 0

vue开发微信商城项目总结之五--vue实现九宫格抽奖

根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单福币类奖品，直接发放...，可在交易明细中查看优惠劵类奖品，交易明细中查看九宫格转动之后，中奖之前，要进行降速处理，获奖后可以在右上角查看中奖记录，活动未开始不能抽奖，并且更换按钮状态示意图 ?...该项目脱离了Jquery，采用原生js和vue实现项目地址在这里后台接口结构 { "bizCode": "000000", "bizMessage": "", "data": {...-- 部分字段说明 ---- prizeDesc：奖品说明，采用“$utf8$”分割，前端截取成数组，进行展示 winners：获奖名单 defineId：活动id remainingTimes：剩余抽奖次数...beginTime：活动开始时间 endTime活动结束时间 currTime:当前时间 title：活动标题 prizeInfo：奖品信息 lotteryDesc：抽奖活动说明规则,同奖品说明prizeDesc

1.4K2 0

iOS概率抽奖算法 & 转盘算法 &轮盘边框动画

引言 iOS抽奖转盘：概率抽奖算法 & 转盘算法 & 转盘主视图的实现思路（从CSDN下载完整Demo）https://download.csdn.net/download/u011018979/16651799...github.com/zhangkn/TurntableV 在app侧控制中奖奖品，有两种方式方式一：发起网络请求获取当前选中奖品(推荐)，即由服务侧控制中奖数据，更安全方式二：根据奖品百分比进行控制中奖概率...I、根据奖品百分比进行控制中奖概率根据中奖概率probability 确定随机中奖范围probabilityRange 根据随机中奖范围probabilityRange，确定中奖奖品 1.1 定义奖品模型...property (nonatomic, copy) NSString *imageName; @property (nonatomic, copy) NSString *icon; /** 该奖品的中奖概率...assign) double probability; // @property (nonatomic, assign) NSRange probabilityRange; /** 根据奖品的中奖概率获取中奖奖品

1.8K2 0

PHP制作带数据库的九宫格抽奖

基于MVC模式制作的一个九宫格抽奖，简单实现数据后台管理操作的可视化。 MVC(模型-视图-控制器)是啥不多解释了，通俗说就是前台后台都有而且可以直接对数据库操作。...View-index.html └── View-GiftInfo.html ├── images ├── index.html ├── gift.php └── main.js 介绍九宫格抽奖...，自定义礼物和概率如果抽到红包，则再抽随机红包金额抽奖代码验证，记录输入的抽奖代码后台增加了一个访问需要验证唯一密码记录每一条抽奖记录，支持删除和查看详细信息详细信息，包括编号、抽奖代码、抽奖时间...、礼物名称截图前台：后台：玩法可以告诉女朋友本次抽奖的抽奖代码是什么，然后不论他抽多少次，都只选择第一次的为准，这样可以避免耍赖哈哈哈，当然你也可以耍赖，你用抽奖代码多抽几次，然后删除掉自己不想选的...，留下想选的即可，更直接的是直接代码里面修改概率，不过这个被发现会挨打hah！

1.6K2 0

如何优雅的实现一个九宫格抽奖

作者：黄鹏如何优雅的实现一个九宫格抽奖九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。功能分析 ?...方案：分析完了九宫格需要实现的功能，现在介绍一下实现方案。方案一基于setTimeout 的旋转方式。...经过多次尝试，发现九宫格有如下特点：虽然是旋转效果，但是旋转方式各有不同。因此不应该过多依赖于css(方案二的弊端)。九宫格，抽奖是抽八个奖。但是有可能抽九个奖，十个奖项。旋转的方向也不同。...: 4, next: 5 }, { index: 5, next: 6 }, { index: 6, next: 7 }, { index: 7, next: 0 }, ] // 初始化抽奖...这样子就可以完美的提供给任何人用了，还可以兼容各种复杂的抽奖情况。

2.1K1 0

100行前端代码实现九宫格抽奖功能

content="IE=edge"> 抽奖...礼品8 礼品9 开始抽奖

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭