九段刀客：js九宫格转盘抽奖实现原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>九宫格抽奖</title><style>html,body {font-size: 13.3333333333333vw;}*{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: #fff;font-size: .3rem;}.items{display: grid;grid-template-columns: repeat(3,calc(100vw/3));grid-template-rows: repeat(3,calc(100vw/3));}.item{border: 1px solid #fff;background-color: #f0f0f0;display: grid;justify-content: center;align-items: center;}.item-active{border: 1px solid red;background-color: pink;color: #fff;}.item:nth-child(5){border:1px solid green;background-color: green;color:#fff;}</style>
</head>
<body><div id="app"><div class="items"><div v-for="(item,index) in items" :key="index" class="item" :class="active===index?'item-active':''"@click="toBegin(index)"><span>{{item.name}}</span></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{active:null,circle:[0,1,2,5,8,7,6,3],items:[{name:'手机0'},{name:'钱包1'},{name:'iPhone11-2'},{name:'华为P30-3'},{name:'开始抽奖'},{name:'Ipad-5'},{name:'小米背包-6'},{name:'小米鼠标-7'},{name:'无线路由器-8'},]},methods:{toBegin(index){if(index===4){// 0-8的随机数let random = Math.floor(Math.random()*10-1);// 最少转3圈let turnsNumber = random > 3?random:3;let array = [];for(let j = 1;j<turnsNumber;j++){array = array.concat(this.circle)}// 最后一圈的计算let lastArray = [];for(let i = 0;i<random;i++){lastArray.push(this.circle[i])}array = array.concat(lastArray);// 改变索引实现转动效果for(let i=0;i< array.length;i++){setTimeout(() => {this.active = array[i]}, i*50) }}},}})</script>
</body>
</html>

九段刀客：js九宫格转盘抽奖实现原理相关推荐

android 九宫格转盘,vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图抽奖因为 ...
移动端九宫格转盘抽奖vue组件
vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图抽奖因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置 ...
微信js 大转盘抽奖
看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下 queryRotate 这个插件就可以实现这个功能 jqueryRotate: 支持Internet Explorer ...
原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
php仿京东幸运大转盘抽奖,原生js vue 抽奖插件仿京东大转盘抽京豆（原创）...
插件描述:一个基于原生 javript vue2 vue3 的大转盘抽奖插件更新时间:2020-11-24 00:18:54 在 vue2.x / vue3.x 中使用方式 1:通过 import ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
jquery抽奖转盘java_jquery实现九宫格大转盘抽奖
下面我们来分享一个九宫格抽奖特效特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上 ...
jquery.rotate.js 转盘抽奖示例
使用jquery.rotate.js 插件简单的转盘抽奖示例: 1.引入jQuery和jquery.rotate.js插件 <script src="static/js/jquery. ...

九段刀客：js九宫格转盘抽奖实现原理

九段刀客：js九宫格转盘抽奖实现原理相关推荐

最新文章

热门文章