jquery九宫格抽奖效果代码实例
分享一段代码实例,它实现了九宫格抽奖效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> ul { width: 328px; } li { width: 100px; height: 100px; border: 1px #000 solid; float: left; margin-left: 5px; list-style: none; text-align:center; line-height:100px; } .active { background: red; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var num = 0; $('input').click(function () { var step = parseInt(Math.random() * 20 + 5); var time = setInterval(function () { $('li').attr('class', ''); $('li').eq(num).addClass('active'); num++; step--; if (step == 0) { clearInterval(time); alert('恭喜你获得' + $("li[class='active']").html()); } if (num == $('li').length) { num = 0; } }, 100); }); }); </script> </head> <body> <input type="button" value="抽奖"> <ul> <li>1等奖</lSi> <li>2等奖</li> <li>3等奖</li> <li>4等奖</li> <li>5等奖</li> <li>6等奖</li> <li>7等奖</li> <li>8等奖</li> <li>9等奖</li> </ul> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).var num = 0,声明一个变量并赋值为0。(3).$('input').click(function () {}),为按钮注册click事件处理函数。
(4).var step = parseInt(Math.random() * 20 + 5),生成一个5-25的随机数,用作在九宫格中跳动的次数。
(5).var time = setInterval(function () {},100),每100毫秒,执行一次回调函数。
(6). $('li').attr('class', ''),首先清除元素的class样式值,防止出现多个红色格现象。
(7).$('li').eq(num).addClass('active'),为指定索引值的格添加指定样式雷,这样背景色就变红色。
(8).num++,num值加1。
(9).step--,step值减1。
(10).if (step == 0) {
clearInterval(time);
alert('恭喜你获得' + $("li[class='active']").html());
},如果step等于0,也就是跳动的方格的次数达到最初的step次,那么就停止定时器函数的执行,并获取抽奖信息。
(11).if (num == $('li').length) {
num = 0;
},如果num值等于方格的个数,那么就将其重置为0。
二.相关阅读:
(1).parseInt()可以参阅javascript parseInt()一章节。
(2).Math.random()可以参阅javascript Math.random()一章节。
(3).setInterval()可以参阅window.setInterval()一章节。
(4).attr()可以参阅jQuery attr()方法一章节。
(5).eq()可以参阅jQuery eq()方法一章节。
(6).addClass()可以参阅jQuery addClass()方法一章节。
(7).clearInterval()可以参阅clearInterval() 方法一章节。
jquery九宫格抽奖效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jquery九宫格抽奖效果代码实例就介绍到这了。
jquery九宫格抽奖效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。