js抽卡抽奖模拟器（只实现基础功能）

最新推荐文章于 2026-05-22 12:18:14 发布
原创 最新推荐文章于 2026-05-22 12:18:14 发布 · 3k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai 猫猫很担心你，连夜帮你修好了bug

cknow-ai 关注

标签
#html #前端 #html5 #javascript
分类 前端开发
cknow-ai 代码可运行
本文介绍了如何使用JavaScript创建一个基础的抽奖模拟器，奖池包含0-99的数字，其中0和1代表SSR奖品，2-11为SR奖品，其余为R奖品。通过点击事件生成随机数并判断奖项，抽中SSR时显示中奖提示。此外，还讨论了十连抽的实现以及SR卡的判定方法。示例代码包括CSS、HTML和JS部分，适合初学者练习。

先看看效果图

 

 

规则：奖池有0~99这100个数，0为SSR的up卡（更厉害的奖），1为 SSR的卡，2~11这11个为SR卡，剩余的为R卡。

整体思路：

1.利用js的绑定点击事件进行math.floor的随机数生成然后进行数字匹配

2.当抽中SSR时候弹出框恭喜中奖框

3.通过innerHTML对文本数据进行修改

十连抽卡思路：

利用for循环10次

SR卡判定思路：

由于作为0，1的SSR卡之前已经用if筛除，所以sr卡是2~11，所以说用当前数字减去11，当结果小于等于0那么必定是SR卡

下面为代码部分

 这个可以自己看着做一下，用到的都是很基础的知识，也可以按自己的喜好进行调节

 

CSS部分:

 .numbox {
            width: 50vw;
            height: 200px;
            background-color: aquamarine;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
        }

        .check {
            width: 20vw;
            height: 50px;
            background-color: beige;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }
        .line{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .diyself{
            width: 30vw;
            height: 150px;
            font-size: 40px;
            text-align: center;
            margin-right: 5vw;
            margin-top: 25px;
            background-color: aqua;
        }

HTML部分：

<div class="numbox">
        <div class="line">
            <div>
                <div>已完成抽卡数:</div>
                <div class="totalnum">0</div>
            </div>

            <div>
                <div>已获得R卡数:</div>
                <div class="Rtotal">0</div>
            </div>

            <div>
                <div>已获得SR卡数:</div>
                <div class="SRtotal">0</div>
            </div>

            <div>
                <div>已获得SSR卡数:</div>
                <div class="SSRtotal">0</div>
            </div>
        </div>
        <div>
            <div class="diyself">配图区域</div>
        </div>
    </div>
    <div class="check">
        <button class="once">抽取1次</button>
        <button class="tenth">抽取10次</button>
    </div>

js部分：

1.进行数据设置与绑定

 //数据连接与创设
        let once = document.querySelector(".once")
        let tenth = document.querySelector(".tenth")

        
        let totalnum = document.querySelector(".totalnum")
        let Rtotal = document.querySelector(".Rtotal")
        let SRtotal = document.querySelector(".SRtotal")
        let SSRtotal = document.querySelector(".SSRtotal")

        let num = 0;
        let Rnum = 0;
        let SRnum = 0;
        let SSRnum = 0;

2.点击事件（单抽）

//单抽
        once.onclick = function () {
            
                let b = Math.floor(Math.random() * 100);

                if (b == 0) {
                    alert("恭喜您于第" + num + "发抽中当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b == 1) {
                    alert("恭喜您于第" + num + "发抽中非当期up的SSR角色")
                    SSRnum++;
                   SSRtotal.innerHTML = SSRnum;
                } else if (b - 11 <= 0) {
                    SRnum++;
                    SRtotal.innerHTML = SRnum;
                } else {
                    Rnum++;
                    Rtotal.innerHTML = Rnum;
                }
                num++
                totalnum.innerHTML = num;
            
        }

 十连抽

tenth.onclick = function () {
            for (let i = 0; i < 10; i++) {
                let b = Math.floor(Math.random() * 100);

                if (b == 0) {
                    alert("恭喜您于第" + num + "发抽中当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b == 1) {
                    alert("恭喜您于第" + num + "发抽中非当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b - 11 <= 0) {
                    SRnum++;
                    SRtotal.innerHTML = SRnum;
                } else {
                    Rnum++;
                    Rtotal.innerHTML = Rnum;
                }
                num++
                totalnum.innerHTML = num;
            }
        }

 

 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽卡</title>
    <style>
        .numbox {
            width: 50vw;
            height: 200px;
            background-color: aquamarine;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
        }

        .check {
            width: 20vw;
            height: 50px;
            background-color: beige;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }
        .line{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .diyself{
            width: 30vw;
            height: 150px;
            font-size: 40px;
            text-align: center;
            margin-right: 5vw;
            margin-top: 25px;
            background-color: aqua;
        }

    </style>
</head>

<body>
    <div class="numbox">
        <div class="line">
            <div>
                <div>已完成抽卡数:</div>
                <div class="totalnum">0</div>
            </div>

            <div>
                <div>已获得R卡数:</div>
                <div class="Rtotal">0</div>
            </div>

            <div>
                <div>已获得SR卡数:</div>
                <div class="SRtotal">0</div>
            </div>

            <div>
                <div>已获得SSR卡数:</div>
                <div class="SSRtotal">0</div>
            </div>
        </div>
        <div>
            <div class="diyself">配图区域</div>
        </div>
    </div>
    <div class="check">
        <button class="once">抽取1次</button>
        <button class="tenth">抽取10次</button>
    </div>

    <script>
        //数据连接与创设
        let once = document.querySelector(".once")
        let tenth = document.querySelector(".tenth")

        
        let totalnum = document.querySelector(".totalnum")
        let Rtotal = document.querySelector(".Rtotal")
        let SRtotal = document.querySelector(".SRtotal")
        let SSRtotal = document.querySelector(".SSRtotal")

        let num = 0;
        let Rnum = 0;
        let SRnum = 0;
        let SSRnum = 0;
       


        //设置点击事件
        //十连抽
        tenth.onclick = function () {
            for (let i = 0; i < 10; i++) {
                let b = Math.floor(Math.random() * 100);

                if (b == 0) {
                    alert("恭喜您于第" + num + "发抽中当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b == 1) {
                    alert("恭喜您于第" + num + "发抽中非当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b - 11 <= 0) {
                    SRnum++;
                    SRtotal.innerHTML = SRnum;
                } else {
                    Rnum++;
                    Rtotal.innerHTML = Rnum;
                }
                num++
                totalnum.innerHTML = num;
            }
        }

        //单抽
        once.onclick = function () {
            
                let b = Math.floor(Math.random() * 100);

                if (b == 0) {
                    alert("恭喜您于第" + num + "发抽中当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b == 1) {
                    alert("恭喜您于第" + num + "发抽中非当期up的SSR角色")
                    SSRnum++;
                    SSRtotal.innerHTML = SSRnum;
                } else if (b - 11 <= 0) {
                    SRnum++;
                    SRtotal.innerHTML = SRnum;
                } else {
                    Rnum++;
                    Rtotal.innerHTML = Rnum;
                }
                num++
                totalnum.innerHTML = num;
            
        }


    </script>
</body>

</html>

点赞 点赞 3
评论 1
书签 书签 2
抽奖模拟器 v1.0免费版
01-05
为您提供抽奖模拟器下载，抽奖模拟器是一款穿越火线活动抽奖模拟软件，奖品和概率设置，玩法更加真实，还可以设置概率分母，抽奖次数等信息！使用说明　　奖品和概率可自己设定，格式为“奖品丨概率”　　如：　　SSS丨0.01‘奖品为SSS，概率为0.01%　　SS丨0.1　　S丨1　　UR丨1　　SR丨1　　垃圾丨50　　分母默认为100，如0.1则概率为百分之0.01，为5则百分之5
卡牌抽奖特效（内含背景音乐，图片，代码）
03-05
卡牌抽奖特效(内置自定义音乐播放器)
【PYQT】制作可以显示图片的抽卡模拟器
viogami的博客
05-18 6791
记录自己学习pyqt制作抽卡模拟器（简易）的过程。抽卡规则基于赛马娘。实现了一连抽和十连抽的功能，保底功能，十连抽必出sr功能，抽出ssr显示图片功能，以及货币不足提示功能以上就是分享的内容，也是自我学习的记录，很多还在摸索中，请多指教~
自制的抽卡模拟器
sq_ly的博客
12-26 6019
话不多说，看代码！ #include<bits/stdc++.h> #include<windows.h> #include<stdlib.h> using namespace std; int main() { int A,j,gzj,a1; cout<<"火影抽卡模拟器启动中……"<<endl; Sleep(2 * 1000); FLAG: cout<<"1.肝日常"<<endl<<"2.购
Open Generative AI协作功能：如何实现多人实时编辑与评论系统
最新发布
gitblog_00036的博客
05-22 940
Open Generative AI是一个开源的AI图像和视频生成平台，它通过先进的**多人实时协作功能**让团队能够高效地进行创意工作。作为一款支持200+AI模型的生成式AI工具，Open Generative AI不仅提供强大的AI生成能力，更通过创新的协作系统让创意团队能够无缝合作。 ## 🔥 为什么需要AI协作功能？ 在传统的AI创作流程中，团队成员往往需要： - 单独使用AI工具
概率性抽卡模拟器v2.0(GUI实现)
qq_52750266的博客
12-16 7825
图好玩也是为了检测自己最近所学内容,将以前的程序进行GUI实现 概率模拟部分 package XIangmu; import java.util.Random; public class He_Xin { public static String Gai_lv(){ Random r = new Random(); int x = r.nextInt(1000); if(x<=12){ return "SSR";
模拟概率抽奖
weixin_44732049的博客
01-23 4792
package com.startx.http.wordfilter; import java.util.*; public class RandomDemo { public static void main(String[] args) { Map<String, Object> maps = new LinkedHashMap<>(); maps.put("0.1", "0.1111"); maps.put("1
抽奖模拟器九宫格（用html+css+js实现）
tiffany1105的博客
08-10 2545
/ if (btn.innerText === '停止抽奖') {九宫格的抽奖模拟器，点击中间的按钮开始抽奖，再点击一次停止抽奖。// btn.innerText = '停止抽奖'// 随机生成0到7 之前的整数, 不包含7。// 判断是不是又上一次的高亮类型循环。// 通过索引随机访问 待中奖 div。// 记录下上一次的类名div。// 1.获取开始按钮dom。// // 开始抽奖。// 1.1 绑定点击事件。// //结束抽奖。// 获取随机数作为索引。// 三元表达式写法。...
世界弹射物语 模拟抽卡
chenahong0201的博客
01-27 5105
世界弹射物语 模拟抽卡前言一 框架介绍角色对象二 准备数据三 绘制页面四 编写逻辑1.抽取角色2. 脑溢血动画3. 点击单抽与十连事件4.页面展示五 总结 前言 由于最近玩到喜欢的游戏【世界弹射物语】（国服）。并且抽卡太非。所以萌生了自己写一个模拟抽卡的小玩意。（半吊子html和js） 在弹射的抽卡中，最有趣的就是抽卡脑溢血画面。也简单的在模拟中体现。 感谢 弹射物语磁力 提供的素材。 一 框架介绍 由于只是一个简单的抽卡模拟，所以框架也相对简单很多。 世界弹射物语 │ ├─js 存放 逻辑与数据 │
微信小程序抽奖功能实现全套教程
weixin_42153793的博客
08-17 2256
微信小程序已经成为移动互联网领域内的一股不可忽视的力量。开发者们纷纷转战小程序平台，以期望能够抓住这个潜力巨大的市场。在深入探讨小程序的开发与优化之前，我们首先需要搭建一个稳定高效的开发环境。本章将全面介绍微信小程序的开发工具、开发框架以及相关的技术标准。首先，开发者需要在微信公众平台注册账号，并创建一个小程序项目。随后，下载安装微信开发者工具，这是一个集成了代码编辑器、编译器、调试器、真机调试等多种功能的全能型开发环境。
使用html模拟实现抽奖系统
weixin_52132674的博客
12-27 2847
使用HTML中的JavaScript模拟实现一个抽奖系统 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: url("bg.jpg") no-re
某游戏抽卡模拟器
Oliver_Kahn的博客
06-03 383
每日一发有助于怡神醒脑。
【tkinter】抽卡模拟小程序
qq_59306099的博客
09-01 1868
今天教大家如何用python内置模块tkinter创建一个图形化界面且实现模拟抽卡的功能。在这个项目中，抽奖区域的格子我采用按钮的组件，这样子看起来更有立体感。 该函数用双层循环向屏幕添加按钮组件实现绘制4*4的网格，然后进行格子按钮数据的存放，再向窗口右上角添加文字标签“记录”
类似抽奖几率 模拟几率 可调节几率-易语言
06-12
类似抽奖几率 模拟几率 可调节
【java】课程设计--抽卡模拟器
m0_65431212的博客
12-17 2643
00
游戏王抽卡模拟器（概率计算器）
jsc723的专栏
05-16 1万+
给大家介绍一款功能强大但比较难用的抽卡模拟器，或者叫概率计算器，dl, md, 实卡都适用。 使用方法 1. 创建一个yaml文件，里面格式如下 deck：配置牌组 size: 牌组卡牌总数 cards：定义卡片 卡牌名: 每张卡名字任意 count: 重复次数（默认一张），-1代表根据牌组卡牌总数自动计算（只能有一个-1）， attribute: 一个列表，定义赋予该卡的属性（标签） 属性
C++自制米哈游抽卡模拟器
Minecraft_Qingmu的博客
07-04 925
自制抽卡模拟器，支持自定义up
web练手--抽卡模拟器（1）
热门推荐
一个爱摸鱼的前端的学习日志
09-21 1万+
    抽卡手游玩多了，心血来潮写个抽卡模拟器，卡等级分sss,ss,s,a,b,c六种，sss概率为0.01%，ss概率为0.1%，s概率为1%，a概率为15%，b概率为30%，剩余都为c，为了避免长期呆在非洲，加入了概率补偿的设定，每一次抽到s以下的卡片，都会使概率补偿计数器的值上升，这个计数器的值直接影响到抽到s以上卡的概率，当抽取到s以上卡时，重置这个计数器，防止抽到高级卡的概率过高。目前...
java 抽奖程序，自定义抽奖概率和奖品，模拟王者荣耀水晶抽奖
Xmi2599的博客
05-24 3159
Data@Builder/*** id*//*** 奖品名称*//*** 中奖概率*//*** 奖品图片*/
H5游戏开发：恶魔抽卡
数据库爆破专家的博客
10-24 1065
今天我教大家如何开发一个简易的抽卡游戏 它的名字叫做： 恶魔抽卡 请原谅我是放荡不羁的恶魔，命运在于自己手中，只是一开始就是概率的问题。 游戏规则： 点击按钮后，开始从一组卡组中抽去卡牌，卡组中的卡牌是随机分布的，每次点击按钮后出一张卡牌并翻开正面向玩家展示，如果是厄运卡牌，玩家被淘汰；如果是好运卡牌，玩家继续抽卡，抽卡只有抽到机会卡才能拥有免遭一次淘汰的机会。 如果成功抽完卡组中的卡牌，恭喜...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值