被黑心商家坑了N次，探究抽奖背后的秘密 —— H5转盘小游戏完整实现（源码直接拿走）

最后

我还通过一些渠道整理了一些大厂真实面试主要有：蚂蚁金服、拼多多、阿里云、百度、唯品会、携程、丰巢科技、乐信、软通动力、OPPO、银盛支付、中国平安等初，中级，高级Java面试题集合，附带超详细答案，希望能帮助到大家。

还有专门针对JVM、SPringBoot、SpringCloud、数据库、Linux、缓存、消息中间件、源码等相关面试题。

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

}

input:focus{

outline: none;

}

header{

height: .88rem;

border-bottom: 1px solid #ccc;

background-color: #fff;

}

.header-back{

width: .36rem;

height: .36rem;

float: left;

margin-top: .27rem;

margin-left: .28rem;

}

.header-title{

float: left;

font-weight: 600;

width: 90%;

font-size: .36rem;

color: #333;

text-align: center;

line-height: .88rem;

}

.container{

font-size: 24px;

text-align: center;

padding-top: 50px;

}

.lottery{

font-size: .32rem;

width: 6rem;

height: 6rem;

margin: .2rem auto;

display: flex;

display: -webkit-flex;

flex-wrap: wrap;

border: 1px solid #000;

}

.item{

width: 2rem;

height: 2rem;

line-height: 2rem;

color: orangered;

font-weight: bold;

text-align: center;

border: 1px solid orangered;

box-sizing: border-box;

background-size: 100%;

}

.active{

background: #ffe6cc;

}

button:focus{

outline: none;

}

.lottery-item-0{

background-image: url(‘…/img/huawei.png’);

}

.lottery-item-1{

background-image: url(‘…/img/iphone.jpg’);

}

.lottery-item-4{

background-image: url(‘…/img/xiaomi.jpg’);

}

.lottery-item-7{

background-image: url(‘…/img/xiaoxiong.jpg’);

}

.lottery-item-3{

background-image: url(‘…/img/xiaodu.jpg’);

}

.lottery-item-6{

background-image: url(‘…/img/dfs.jpg’);

}

.lottery-item-5{

background-image: url(‘…/img/bingxiang.jpg’);

}

2. 工具函数（用于调整概率）

---

• 此工具函数传入一个二维数组，用于调整概率

• 默认商品概率相同，调用的时候 randomNum() 时候不传参数即可

• 也可以自由设置概率

function randomNum(arr){

// 1. 容错处理

arr = arr || [];

// ES6 Map对象： 键与值的集合 方便访问其键与值

let m = new Map(arr);

// 计算概率

let probability = 0;

// console.log(m.values())

for (const i of m.values()) {

probability += i;

}

if(probability > 1){

// 给一个友好的提示

alert(“概率总和不能大于1，小学数学是体育老师教的？？？”);

return false;

}

// 剩下没有定义的各自能占多少概率。

// size 返回映射中的元素数

let remainProbability = (1 - probability) / (8 - m.size);

console.log(remainProbability)

// 生成随机值，跟i对应的概率比较，

let res = 0, r = Math.random();

for (let i = 0; i < 8; i++) {

// 有就取值 没有就随机取

m.has(i) ? res += m.get(i) : res += remainProbability;

// console.log("res= "+ res);

// console.log("r= "+ r);

if (res > r) {

return i;

}

}

}

3. 传参及接收值配置

---

let step = 0, //计数器

timeInterval = 2, //速度控制器

final, //最终位置

looperFun, // setTimeout的返回值

prizeList = [‘华为’, ‘iPhone X’, ‘谢谢惠顾’, ‘小度音响’, ‘手环’, ‘格力冰箱’, ‘电风扇’, ‘小熊抱枕’];

// 开始游戏

function start(e){

if(e.target.dataset.able === “1”){

// 随机0-7

// 设置抽奖概率 不传参的话这几个商品几率相等

// let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];

// final = randomNum(arr);

final = randomNum(); // 这里不传参 概率均等

console.log(final);

if(final === false){

console.log(“出错了”);

return false;

}

e.target.setAttribute(‘data-able’, 0);

looperFun = setTimeout(looper, 100);

}else{

console.log(“什么垃圾玩意，点不了”);

return false;

}

}

• 传参的二维数组第一个值代表商品id，第二个值为分配的概率

// 设置抽奖概率 不传参的话这几个商品几率相等

// let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];

4. dom 操作方法及具体逻辑处理

---

// 获取元素

function $my(classes){

return document.querySelector(classes);

}

// 旋转九宫格

function looper(){

// 移除上一个被选中的样式

KaTeX parse error: Expected 'EOF', got '&' at position 15: my(".active") &̲&　my(“.active”).classList.remove(“active”);

// 转了超过3圈后才能停止。

if (step >= 24 + final) {

$my(‘.lottery-item-’ + final).classList.add(‘active’);

step = final;

setTimeout(() => {

$my(‘.start’).setAttribute(‘data-able’, 1);

alert(‘恭喜你，抽中了’ + prizeList[final]);

}, 100);

clearTimeout(looperFun);

return;

}

//当前转圈到的位置。

let index = step % 8;

$my(‘.lottery-item-’ + index).classList.add(‘active’);

总结

对于面试还是要好好准备的，尤其是有些问题还是很容易挖坑的，例如你为什么离开现在的公司（你当然不应该抱怨现在的公司有哪些不好的地方，更多的应该表明自己想要寻找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等）

Java面试精选题、架构实战文档

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持，我的动力；祝各位前程似锦，offer不断！

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等）

[外链图片转存中…(img-ZZxX7kdn-1715705785809)]

Java面试精选题、架构实战文档

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持，我的动力；祝各位前程似锦，offer不断！

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取