原生JS实现H5转盘游戏的示例代码原生JS实现H5转盘游戏的示例代

1.基础的页面布局（index.html）

1.1html布局
1.2css布局（style.css）

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

3.传参及接收值配置

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

5.FAQ（注意事项）

本文是真实的实战项目，可以直接拿去用 —— 转盘抽奖
可以自由调整概率，你也可以成为黑心商家
项目效果是这样滴：视频链接

1. 基础的页面布局（index.html）这里不做过多解释了，就是一些页面布局
大家直接复制粘贴过去用就行（是不是很贴心~）

1.1 html布局

九宫格抽奖 - 锐客网H5转盘抽奖（可自由设置概率）

华为手机
iPhone 手机
谢谢惠顾
小熊抱枕
开始
小度音响
电风扇
格力冰箱
小米手环

1.2 css布局（style.css）

@charset "UTF-8"; html{ height: 100%; font-size: 16px; }body{font-family:-apple-system-font, "Helvetica Neue", sans-serif; -webkit-font-smoothing: subpixel-antialiased; }body, a, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, article, section, div, p, header, footer, menu, input, img{ margin: 0; padding: 0; }img{vertical-align: middle; }p, h1, h2, h3, h4, h5, h6,ul{ -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; -moz-margin-before: 0; -moz-margin-after: 0; -moz-padding-start: 0; -moz-padding-end: 0; }/* clear float */.clearfix:after {content:""; display: block; clear:both; }/* Responsive Layout */li{ list-style: none; }a{ text-decoration: none; }input{ -webkit-appearance: none; }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(){// 移除上一个被选中的样式$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'); step++; // 下次变色的时间。let duration; if (step >= (16 + final)) { //在剩余一圈时候开始减速timeInterval += 1; } else {if (timeInterval <= 2) {timeInterval = 2; //时间缩短不能太小。}// 越来越快timeInterval--; }duration = timeInterval * 50; looperFun = setTimeout(looper, duration); }

5. FAQ（注意事项） 【原生JS实现H5转盘游戏的示例代码】1.手机端和PC端都可以操作
2.商品图需要自己引入一下
3.注意引入路径问题
4.js文件可以只写一个（第三步和第四步放一起就行）
以上就是原生JS实现H5转盘游戏的示例代码的详细内容，更多关于JS转盘游戏的资料请关注脚本之家其它相关文章！