js抽卡抽奖模拟器（只实现基础功能）
生活随笔
收集整理的這篇文章主要介紹了
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>總結
以上是生活随笔為你收集整理的js抽卡抽奖模拟器（只实现基础功能）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抗疫周观察 | 应届毕业生忧虑就业形势，
- 下一篇： 微信小程序使用第三方库（第三方js）问题