JavaScript 练手小案例:九宫格抽奖

您所在的位置:网站首页 九宫格抽奖素材视频下载 JavaScript 练手小案例:九宫格抽奖

JavaScript 练手小案例:九宫格抽奖

2024-07-12 05:37| 来源: 网络整理| 查看: 265

看到个抽奖案例,觉得还不错。就自己做了一个简单版本。。

点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下。停下的格子就是中奖的奖品。

 主要思路:

1、抽奖的高亮色块轮循,使用一个 class 去控制。

2、要控制色块轮循的速度快慢,要用到计时器 setTimeout,可以控制轮循速度。

3、正在抽奖轮循的时候,开始按钮是不能点击的。所以要用一个变量判断当前是否正在轮循。

4、轮循的次数是一个随机数,这样每次开始轮循的结果都是随机的。

HTML 0 1 2 3 开始 5 6 7 8

开始菜单在中间,因此轮循环的奖品 li ,其实是 0 -3 ,5-8 这几个 li。

CSS .box{ width: 300px; height: 300px; margin-left: auto; margin-right: auto; } .box li{ width: 98px; height: 98px; float: left; margin-left: 1px; margin-right: 1px; margin-bottom: 1px; margin-top: 1px; background: #b2967d; } .box .show{ background: #ffb8af; }

色块高亮,用的是一个类去控制。所以,要在样式里把类 show 写好。

JavaScript代码 let box = document.getElementById("box"); let start = document.getElementById("start"); let li = box.querySelectorAll("li"); let indexArr = [0,1,2,5,8,7,6,3];

因为这里 li 是直接浮动的,而轮循的标签是围绕 start 一圈的,顺序不是 0-8依次增长的。所以,用了一个数组 indexArr 来控制轮循的标签的索引顺序。

方块的高亮添加和去掉,利用了两个工具函数:

// 查找兄弟标签 let findeSibling = (tag)=>{ let arr = []; for(let i=0; i=startTimes ){ // 开始阶段,speed 加速,减少值 speed -= 20 ; } if( times


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3