用js写一个九宫格抽奖

效果上图

js代码


```javascript
//每个单元格
var divnum=document.getElementsByClassName("num");
//开始按钮
var startbtn=document.getElementById("start");
//随机的停止位(整数)
var stopPosition =Math.floor(Math.random()*8+1);
//装单元格的数组
var divList =[];
//装索引的数组
var indexList=[0, 1, 2, 5, 8, 7, 6, 3]//0 1 2 5 8 7 6 3 抽奖顺序for(let  i=0;i<divnum.length;i++){divList.push(divnum[indexList[i]]);
}// 转多少圈停止var roundNum=0;//当前位置var currentIndex=0;
//抽奖运动变色
function animation(index){divList[index].style.background="red";//选择当前的，把上一个初始化if(index==0){divList[7].style.background="#fff";}else{divList[index-1].style.background="#fff";}return
}//点击事件
startbtn.onclick=function(){//初始化for(let i=0;i<divList.length-1;i++){divList[i].style.background="#fff";}stopPosition =Math.floor(Math.random()*8+1);startbtn.innerText="抽奖中...";speedFun(500);
//加速器
function speedFun(speed){//圈数没有结束if (roundNum!=50){//速度没有达到最大if (speed!=100){speed-=50;}roundNum++;}else{if(speed!=500){speed+=50;}else{if(currentIndex==stopPosition){//tingstopLuck();return}}}//当前位置
currentIndex=currentIndex>7?0:currentIndex;
animation(currentIndex);
currentIndex++;
setTimeout( function(){speedFun(speed)
},speed)
}}
//停止抽奖
function stopLuck(){startbtn.innerText="抽奖";}

注意点：
1：九个格子 index依次为0-8 ，变红的的为顺序为0 1 2 5 8 7 6 3


2：注意divList各个index值  否则不能找不到style报错。

用js写一个九宫格抽奖相关推荐

JS写一个图片抽奖机
1 首先把静态页面代码完成 <div class="box"><div class="box01"><div class=&quo ...
ivx平台开发——不用代码实现一个九宫格抽奖
原创公众号:bigsai 前言上次说过在看一些关于0代码开发平台ivx,前一段时间忙完考试最近跟着教程0代码实现一个九宫格抽奖,哈哈哈感觉还是蛮强大的,懂点的人都知道可视化这个东西我们正常都是用一些 ...
【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
[js] 写一个方法遍历指定对象的所有属性
[js] 写一个方法遍历指定对象的所有属性 Object.keys().Object.values()只能遍历对象自有的属性,for in 可以遍历原型中的属性. 个人简介我是歌谣,欢迎和大家一起交 ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...

用js写一个九宫格抽奖

用js写一个九宫格抽奖相关推荐

最新文章

热门文章