html 前端 html5 javascript 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部分：