JavaScript 练手小案例:九宫格抽奖 |
您所在的位置:网站首页 › 九宫格抽奖素材视频下载 › JavaScript 练手小案例:九宫格抽奖 |
看到个抽奖案例,觉得还不错。就自己做了一个简单版本。。 点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下。停下的格子就是中奖的奖品。 主要思路: 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 |