jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼

更新時(shí)間：2017年08月23日 08:35:29 作者：正是澤

這篇文章主要介紹了jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼,需要的朋友可以參考下

需求：

最多可以抽獎(jiǎng)5次，而且，每次只會(huì)中“2000元理財(cái)金”或者“謝謝參與”，其它的不會(huì)抽中（哈哈，果然都是套路）。

效果如下：

一、頁(yè)面結(jié)構(gòu)：

<div class="g-content">
  <div class="g-lottery-case">
    <div class="g-left">
      <h2>您已擁有<span class="playnum"></span>次抽獎(jiǎng)機(jī)會(huì)，點(diǎn)擊立刻抽獎(jiǎng)！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開(kāi)始抽獎(jiǎng)"></a>
      </div>
    </div>
  </div>
</div>

標(biāo)簽h2為提示內(nèi)容，.playnum是剩余抽獎(jiǎng)次數(shù)，.g-lottery-img是最外層的閃燈，.g-lottery-img是轉(zhuǎn)動(dòng)的內(nèi)容，.playbtn是點(diǎn)擊抽獎(jiǎng)按鈕。

這里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很簡(jiǎn)單的，沒(méi)幾個(gè)AIP。

二、簡(jiǎn)單的樣式：

<style>
  .g-content {
    width: 100%;
    background: #fbe3cc;
    height: auto;
    font-family: "微軟雅黑", "microsoft yahei";
  }
  .g-content .g-lottery-case {
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
  }
  .g-content .g-lottery-case .g-left h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    margin-left: 20px;
  }
  .g-content .g-lottery-case .g-left {
    width: 450px;
    float: left;
  }
  .g-lottery-box {
    width: 400px;
    height: 400px;
    margin-left: 30px;
    position: relative;
    background: url(ly-plate-c.gif) no-repeat;
  }
  .g-lottery-box .g-lottery-img {
    width: 340px;
    height: 340px;
    position: relative;
    background: url(bg-lottery.png) no-repeat;
    left: 30px;
    top: 30px;
  }
  .g-lottery-box .playbtn {
    width: 186px;
    height: 186px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -94px;
    margin-top: -94px;
    background: url(playbtn.png) no-repeat;
  }
</style>

樣式就定一下高度，居中一下，顯示一下背景圖片

三、JS代碼：

<script>
  $(function() {
    var $btn = $('.g-lottery-img');// 旋轉(zhuǎn)的div
    var playnum = 5; //初始次數(shù)，由后臺(tái)傳入
    $('.playnum').html(playnum);//顯示還剩下多少次抽獎(jiǎng)機(jī)會(huì)
    var isture = 0;//是否正在抽獎(jiǎng)
    var clickfunc = function() {
      var data = [1, 2, 3, 4, 5, 6];//抽獎(jiǎng)
      //data為隨機(jī)出來(lái)的結(jié)果，根據(jù)概率后的結(jié)果
      data = data[Math.floor(Math.random() * data.length)];//1~6的隨機(jī)數(shù)
      switch(data) {
        case 1:
          rotateFunc(1, 0, '恭喜您獲得2000元理財(cái)金');
          break;
        case 2:
          rotateFunc(2, 0, '恭喜您獲得2000元理財(cái)金2');
          break;
        case 3:
          rotateFunc(3, 0, '恭喜您獲得2000元理財(cái)金3');
          break;
        case 4:
          rotateFunc(4, -60, '謝謝參與4');
          break;
        case 5:
          rotateFunc(5, 120, '謝謝參與5');
          break;
        case 6:
          rotateFunc(6, 120, '謝謝參與6');
          break;
      }
    }
    $(".playbtn").click(function() {
      if(isture) return; // 如果在執(zhí)行就退出
      isture = true; // 標(biāo)志為 在執(zhí)行
      if(playnum <= 0) { //當(dāng)抽獎(jiǎng)次數(shù)為0的時(shí)候執(zhí)行
        alert("沒(méi)有次數(shù)了");
        $('.playnum').html(0);//次數(shù)顯示為0
        isture = false;
      } else { //還有次數(shù)就執(zhí)行
        playnum = playnum - 1; //執(zhí)行轉(zhuǎn)盤(pán)了則次數(shù)減1
        if(playnum <= 0) {
          playnum = 0;
        }
        $('.playnum').html(playnum);
        clickfunc();
      }
    });
    var rotateFunc = function(awards, angle, text) {
      isture = true;
      $btn.stopRotate();
      $btn.rotate({
        angle: 0,//旋轉(zhuǎn)的角度數(shù)
        duration: 4000, //旋轉(zhuǎn)時(shí)間
        animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來(lái)的結(jié)果加上1440度旋轉(zhuǎn)
        callback: function() {
          isture = false; // 標(biāo)志為 執(zhí)行完畢
          alert(text);
        }
      });
    };
  });
</script>

說(shuō)到底就是用一個(gè)1~6的隨機(jī)數(shù)，然后把對(duì)應(yīng)的角度值傳給jquery.rotate.js,它就會(huì)轉(zhuǎn)到相應(yīng)的地方，最后做一下對(duì)應(yīng)剩余次數(shù)的判斷和修改。

最后所有代碼為：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>抽獎(jiǎng)</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <style>
  .g-content {
    width: 100%;
    background: #fbe3cc;
    height: auto;
    font-family: "微軟雅黑", "microsoft yahei";
  }
  .g-content .g-lottery-case {
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
  }
  .g-content .g-lottery-case .g-left h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    margin-left: 20px;
  }
  .g-content .g-lottery-case .g-left {
    width: 450px;
    float: left;
  }
  .g-lottery-box {
    width: 400px;
    height: 400px;
    margin-left: 30px;
    position: relative;
    background: url(ly-plate-c.gif) no-repeat;
  }
  .g-lottery-box .g-lottery-img {
    width: 340px;
    height: 340px;
    position: relative;
    background: url(bg-lottery.png) no-repeat;
    left: 30px;
    top: 30px;
  }
  .g-lottery-box .playbtn {
    width: 186px;
    height: 186px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -94px;
    margin-top: -94px;
    background: url(playbtn.png) no-repeat;
  }
  </style>
</head>
<body>
<div class="g-content">
  <div class="g-lottery-case">
    <div class="g-left">
      <h2>您已擁有<span class="playnum"></span>次抽獎(jiǎng)機(jī)會(huì)，點(diǎn)擊立刻抽獎(jiǎng)！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開(kāi)始抽獎(jiǎng)"></a>
      </div>
    </div>
  </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="jsmin/jquery.rotate.min.js"></script>
<script>
$(function() {
  var $btn = $('.g-lottery-img');// 旋轉(zhuǎn)的div
  var playnum = 5; //初始次數(shù)，由后臺(tái)傳入
  $('.playnum').html(playnum);//顯示還剩下多少次抽獎(jiǎng)機(jī)會(huì)
  var isture = 0;//是否正在抽獎(jiǎng)
  var clickfunc = function() {
    var data = [1, 2, 3, 4, 5, 6];//抽獎(jiǎng)
    //data為隨機(jī)出來(lái)的結(jié)果，根據(jù)概率后的結(jié)果
    data = data[Math.floor(Math.random() * data.length)];//1~6的隨機(jī)數(shù)
    switch(data) {
      case 1:
        rotateFunc(1, 0, '恭喜您獲得2000元理財(cái)金');
        break;
      case 2:
        rotateFunc(2, 0, '恭喜您獲得2000元理財(cái)金2');
        break;
      case 3:
        rotateFunc(3, 0, '恭喜您獲得2000元理財(cái)金3');
        break;
      case 4:
        rotateFunc(4, -60, '謝謝參與4');
        break;
      case 5:
        rotateFunc(5, 120, '謝謝參與5');
        break;
      case 6:
        rotateFunc(6, 120, '謝謝參與6');
        break;
    }
  }
  $(".playbtn").click(function() {
    if(isture) return; // 如果在執(zhí)行就退出
    isture = true; // 標(biāo)志為 在執(zhí)行
    if(playnum <= 0) { //當(dāng)抽獎(jiǎng)次數(shù)為0的時(shí)候執(zhí)行
      alert("沒(méi)有次數(shù)了");
      $('.playnum').html(0);//次數(shù)顯示為0
      isture = false;
    } else { //還有次數(shù)就執(zhí)行
      playnum = playnum - 1; //執(zhí)行轉(zhuǎn)盤(pán)了則次數(shù)減1
      if(playnum <= 0) {
        playnum = 0;
      }
      $('.playnum').html(playnum);
      clickfunc();
    }
  });
  var rotateFunc = function(awards, angle, text) {
    isture = true;
    $btn.stopRotate();
    $btn.rotate({
      angle: 0,//旋轉(zhuǎn)的角度數(shù)
      duration: 4000, //旋轉(zhuǎn)時(shí)間
      animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來(lái)的結(jié)果加上1440度旋轉(zhuǎn)
      callback: function() {
        isture = false; // 標(biāo)志為 執(zhí)行完畢
        alert(text);
      }
    });
  };
});
</script>
</body>
</html>

所需要的圖片(這里好像上傳不了壓縮文件，所以不能整個(gè)打包上傳了)：

#復(fù)制下面的圖片名稱-鼠標(biāo)移到圖片上-右鍵-圖片另存為-粘貼保存#

1.最外面的閃燈：ly-plate-c.gif

2.六個(gè)中獎(jiǎng)內(nèi)容：bg-lottery.png

3.點(diǎn)擊抽獎(jiǎng)按鈕： playbtn.png

總結(jié)

以上所述是小編給大家介紹的jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: