jQuery九宮格抽獎效果程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了九宮格抽獎效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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() 方法一章節。

相關文章