JavaScript 转盘类型抽奖代码

实际效果

一些变量

const config = {wheel: '/image/wheel.png', // 转盘图片icon: '/image/icon.png', // 中心 LOGOarrow: '/image/arrow.png', // 顶部剪头round_time: 5000, // 获取到奖品后转盘旋转动画时间text_color: '#000', // 文字颜色// 奖品列表prizeList: [{ id: 1, text: '1华为P40', img: '/image/prize1.png' },{ id: 2, text: '2谢谢参与', img: '/image/prize2.png' },{ id: 3, text: '3华为P40', img: '/image/prize1.png' },{ id: 4, text: '4谢谢参与', img: '/image/prize2.png' },{ id: 5, text: '5华为P40', img: '/image/prize1.png' },{ id: 6, text: '6谢谢参与', img: '/image/prize2.png' },{ id: 7, text: '7华为P40', img: '/image/prize1.png' },{ id: 8, text: '8谢谢参与', img: '/image/prize2.png' },]
};

HTML

<div class="content"><div class="wheel"><div class="round" :class="{'not_roting' : roting}":style="{ transition: `${config.round_time}ms`, transform: `rotate(${deg}deg)` }"><!-- 转盘图片 --><img :src="config.wheel" alt="" /><div class="prize"><!-- 奖品，宽高均意志，重叠在一起，以转盘中心为原点旋转 360/奖品个数 的角度 --><!-- 这边使用了 v-for, react 使用 map, 原生或 jQuery 需要在 js 中遍历创建完 DOM 元素再插入 --><div v-for="(item, index) in config.prizeList" class="item_box" :key="index.toString()":style="{color: config.text_color, transform: `rotate(${(360 / config.prizeList.length) * index}deg)`}"><div class="item"><span class="text">{{ item.text }}</span><img class="img" :src="item.img" :alt="item.text" /></div></div></div></div><!-- 中部LOGO --><div class="icon"><img :src="config.icon" alt="" /></div><div class="" arrow><img :src="config.arrow" alt="" /></div></div><div class="btn"><el-button size="large" type="primary" v-loading="loading" @click="clickBtn">立即抽奖</el-button></div>
</div>

CSS

.content {width: 500px; /* 移动端，限制最大宽度 */max-width: 100%;margin: auto;overflow-x: hidden;.wheel {position: relative;width: 90%;/* margin、padding的百分比基于宽度，在使用rem的情况下，高度和宽度保持比例可以用padding来撑起 */padding-top: 90%;margin: calc(100 / 750 * 100%) auto auto;overflow: hidden;.round {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* 抽完奖后复位时，旋转不需要过渡时间 */&.not_roting { transition: 0s !important; }.prize {position: absolute;top: 0;left: 0;width: 100%;height: 100%;.item_box {position: absolute;top: 0;left: 0;width: 100%;height: 100%;.item {position: absolute;top: calc(85 / 675 * 100%);left: calc((1 - 145 / 675) * 100% * 0.5);display: flex;flex-direction: column;justify-content: center;align-items: center;width: calc(145 / 675 * 100%);.text {font-size: calc(100vw * 25 / 750);font-weight: bold;line-height: 1;@media (min-width: 500px) { font-size: 17px; }}.img { width: calc(90 / 145 * 100%); margin-top: calc(30 / 145 * 100%); }}}}}/* LOGO 居中 */.icon { position: absolute; top: 50%; left: 50%; width: calc(155 / 675 * 100%); transform: translate(-50%, -50%); }/* 箭头顶部居中 */.arrow { position: absolute; top: calc(28 / 675 * 100%); left: 50%; width: calc(55 / 675 * 100%); transform: translateX(-50%); }}.btn {width: 100%;margin-top: calc(80 / 750 * 100%);>button { display: block; width: calc(650 / 750 * 100%); margin: auto; }}
}

JavaScript

  // 开始抽奖clickBtn() {if (this.roting || this.loading) returnthis.loading = true// 前端生成随机数奖品setTimeout(() => {const config = this.configconst activePrize = config.prizeList[Math.floor(Math.random() * 7)]// 使用 some 循环，获取到奖品即停止遍历config.prizeList.some((item, index) => {if (item.id === activePrize.id) {// 获取该奖品的一个随机角度，具体见下方函数注释const newDeg = this.getRote(index, config.prizeList.length)// roting 为 true 时，转盘有旋转动画，时间为 config.round_timethis.roting = truethis.deg = newDegsetTimeout(() => {// 经过 config.round_time 的时间后，转盘进行复位，方便下一次抽取，deg 不取 0 而是 NewDeg % 360 以确保用户看不到转盘闪动this.roting = falsethis.deg = NewDeg % 360}, config.round_time)return true}})this.loading = false}, 1000);},/*** 根据奖品获取转盘角度* @param {number} index 获得奖品在 prizeList 中的 index* @param {number} count 奖品数量* @return {number}*/getRote(index, count) {if (!count) count = 8; // 若不传奖品数量，则默认为8const MAX_ROUND = 10; // 最大转圈数const MIN_ROUND = 8; // 最小转圈数const OFFSET_MULTIPLE = 0.6; // 偏移量倍数，范围 [0, 1)，例如4个奖品时，偏移量是[-45, 45)，若倍数为 1，则可能出现贴边的情况const unit = 360 / count; // 单元角度，为360 ÷ 奖品总数const offset = Math.floor(Math.random() * -unit) + unit / 2;const newDeg = 360 * Math.floor(Math.random() * (MAX_ROUND - MIN_ROUND + 1) + MIN_ROUND) - unit * index;return newDeg + OFFSET_MULTIPLE * offset;};

源码

https://gitee.com/Blade_gen/vite_vue_base/blob/master/src/views/LuckDraw/index.vue

JavaScript 转盘类型抽奖代码相关推荐

利用JavaScript实现随机抽奖代码
利用JavaScript实现随机抽奖代码一.分析: 二.部分重要功能代码: 1.body页面: 2.通过点击事件来显示随机号码: 3.设置中奖号码: 4.判断是否中奖的方法三.全部代码实现: 图片 ...
JavaScript实现随机抽奖代码
点击开始抽奖,然后设定人员开始不定的改变,直到点击停止为止代码如下 <div class="div"><h2>Who?</h2><img ...
手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码
特效描述:html5 大转盘抽奖支持手机转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...
Canvas实现微信大转盘抽奖代码
Canvas实现微信大转盘抽奖代码,canvas结合jquery实现的一款大转盘抽奖代码,奖品图片均由canvas绘制,可自定义奖项. jquery抽奖微信大转盘jquery抽奖转盘微信抽奖源代码微信 ...
h5php大转盘抽奖,html5的非常简单圆形转盘抽奖代码
html5的非常简单圆形转盘抽奖代码非常简单的html5 canvas实现的圆形转盘抽奖代码,无需jQuery就可以实现的抽奖转盘特效. var fillStyle = ['rgb(255,154, ...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...
HTML手机签到转盘抽奖页面模板,手机端转盘抽奖代码分享
演示效果如下: 不废话了,直接给大家贴代码了. html部分 css部分,由于做的这个转盘是手机端的,采用的响应式布局 .turntableWap{ padding:1rem; background: ...
九宫格抽奖源代码php,原生javascript实现九宫格抽奖效果代码
本篇文章主要介绍了原生javascript实现九宫格抽奖效果代码.具有很好的参考价值.下面跟着小编一起来看下吧效果图: 代码如下: *{margin:0;padding:0;} #container ...
php抽奖页代码,php抽奖代码
1.经典概率算法抽奖 $tmpItems = ['电脑'=>10, '相机'=>50, '100元现金'=>500]; $proSum = array_sum($tmpItems); ...

JavaScript 转盘类型抽奖代码

目录

实际效果

一些变量

HTML

CSS

JavaScript

源码

JavaScript 转盘类型抽奖代码相关推荐

最新文章

热门文章