JS 时间函数实现9宫格抽奖

思路：九宫格抽奖抽象出来，其实就是点击开始按钮以后，从首个单元开始，不停的绕着8个格子转动，最后停留在目标位置。

以下是html部分：

<div class="bigBox"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box_s"><button id="btn">开始</button><button "stop()">结束</button></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>

js部分：

<script>var box = document.getElementsByClassName("box");  //获取所有的旋转盒子var arr = [0, 1, 2, 4, 7, 6, 5, 3];     //获取顺时针的下标旋转的位置var timer = null;            //清楚时间函数var num = 0;                //定义旋转从0开始btn.onclick = function() {if (timer!=null) {              //使在循环过程中时间不再累加return}timer= setInterval(function(){               //间隔时间函数，0.5秒执行一次；for (var i = 0; i < arr.length; i++) {    box[arr[i]].style.background="#f40";       //循环让每个盒子的背景色变为初始值}box[arr[num]].style.background="skyblue";          //当循环到每个盒子时使它变色num++;                              //依次顺序加1if (num==arr.length) {          //判断，当顺换完一次后，又让它从第一张开始。num=0}},500)}function stop() {clearInterval(timer)            //当点击停止按钮时，清除时间函数。timer = null;}
</script>

以上是简单的9宫格抽奖，样式可以根据需求随意改，欢迎各位大神提点

JS 时间函数实现9宫格抽奖相关推荐

java 9宫格抽奖_前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
java 9宫格抽奖_js 实现9宫格抽奖（react）
最近工作中有个9宫格抽奖的需求,一开始没啥思绪,网上查阅一番,自己又修改了一下,希望与大家交流分享. 先看一下效果图整理一下思路利用flex布局形成9宫格,每个格子的序号为0~8,创建一个记录当前 ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...
java 9宫格抽奖_多宫格抽奖
网上大多的多宫格抽奖都是自定义view,如果view的布局不一样而且太多的话容易出现oom,不好管理结合RecyclerView实现多宫格抽奖效果图如下满足所有矩形多宫格抽奖 9宫格 16宫格 ...
time.js 时间函数库
最近自己写了个时间函数库,虽然还不算完善,但是我能想到的功能基本都实现了.感兴趣的可以看下. 使用 npm install time-operation --save 复制代码文档一.工具方法函 ...
java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下上代码: 谢谢惠顾十万元现金谢谢惠顾 iphone11 抽奖美的冰箱谢谢惠顾 50元红包谢谢惠顾 CSS样式代码: ...
java 9宫格抽奖_九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
php9宫格抽奖程序_PHP抽奖算法程序代码分享
抽奖算法需要满足的需求如下: 1.可以控制中奖的概率 2.具有随机性 3.最好可以控制奖品的数量 4.根据用户ID或者ip.手机号.QQ号等条件限制抽奖次数初期就这些需求,然后根据网上的资料,采用了 ...

JS 时间函数实现9宫格抽奖

JS 时间函数实现9宫格抽奖

JS 时间函数实现9宫格抽奖相关推荐

最新文章

热门文章