抽奖轮盘

简单来说，就是通过时间控制函数让一个有色蒙版在九宫格上噼里啪啦来回滚动。

你将在这篇文章里分享到我对抽奖功能的理解和代码，学习到简单的实现过程，虽然仅仅是一个demo，但是通过样式的修改，我相信你可以完全应用这个功能。

什么是九宫格抽奖轮盘

关键词：静态（九宫格，有色蒙版）、动态（轮动，速度-四种，步长）
九宫格抽奖轮盘本质是一个带有色彩的蒙版在八个装在九宫格中的div上面的轮动显示；轮动这一功能通过js的时间控制函数实现；蒙版的轮动速度分为匀速、加速、减速、停止四种状态；而如何表达速度呢？我们使用步长这一概念：

匀速运动，每次轮动时速度和上一次轮动的速度相同，步长相同；
加速运动，每次轮动时速度比上一次轮动的速度更快，步长更小；
减速运动，每次轮动时速度比上一次轮动的速度更慢，步长更大；
停止运动，当前的轮动的速度为0，步长为0；

所以说，我们对抽象速度的操控，本质上是对步长的操控。那么核心代码已经出来了：对“设置步长”、“获取步长”这一对set，get函数的使用就已经涵盖我们要写的所有内容了。而步长就是时间，它会被setTimeout所接收成为参数，进而来控制蒙版的轮动速度。

对于所谓的有色蒙版，html与样式无非是背景颜色的变化。所谓轮动，就是头一个dom的背景颜色消失，同时在后一个dom里出现。但是要用代码实现，只需通过对DOM对象的class类样式的增删即可。

先睹为快

比比再多都不如直接给大家贴代码来的实惠，想直接看代码的可以跳到文章末尾复制code，觉得好的朋友可以点赞支持我。滑动滚轮和点击目录都可实现。

设计程序结构

静态部分

九宫格

由于我做的及其简单，长成这个

简易抽奖H5页面demo，九宫格轮盘抽奖，方块轮盘抽奖功能实现相关推荐

php实现九宫格连线,小程序之页面用九宫格及item跳转的功能实现
这篇文章主要介绍了关于小程序之页面用九宫格及item跳转的功能实现,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间 ...
【长按图片保存到相册】Vue移动端H5页面实现长按图片保存到手机功能
移动端.H5长按保存到相册.web端长按自行选择保存位置先上效果图 2.源码 <template><div class="save-file"><d ...
VUE 移动端H5页面实现长按图片保存到手机功能
需求背景: 我们做的项目类似于支付二维码,让用户保存到手机可以去制作亚克力牌用来收钱. 效果图: 踩坑: 在网上查了好多方法,但是都没有用,脑袋秃秃,html5plus只适用于app项目跟小程序,大家 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
易企秀 we+ Maka 兔展四大H5页面制作工具
H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...
h5页面ios验证码无法自动回填到键盘问题
期望效果:收到验证码后,键盘中自动带出验证码(只针对ios系统) 背景: h5页面有通过手机号验证码实现忘记密码功能.但是验证码的文本框聚焦时,键盘中并没有回填收到验证码.最开始代码如下: <! ...
react实现九宫格抽奖 - h5
react实现九宫格,12宫格抽奖.效果图: 功能:抽奖无线循环滚动获奖名单 (以下完整代码,可直接放在react项目中查看效果.如果用在项目中,还需根据项目需求进行调整) jsx代码 imp ...
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...
【JavaScript】制作一个抽奖转盘页面
开发H5项目,有时会遇到一个需求,需要制作抽奖转盘的网页,这个实现步骤,如果拿现成的改来做是容易的,但是想着全靠自己做是不容易的,下面会讲,全靠自己做,能掌握到吗目录一览 1.设计网页 2. 编写脚 ...
lucky-canvas抽奖插件-大转盘-九宫格-老虎机
地址 https://100px.net/usage/uni-app.html 在vue中使用 npm 安装:npm install @lucky-canvas/vue@latest 在mian.js ...

简易抽奖H5页面demo，九宫格轮盘抽奖，方块轮盘抽奖功能实现