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九宫格抽奖效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容