欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年08月23日 08:35:29   作者：正是澤  
這篇文章主要介紹了jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼,需要的朋友可以參考下

需求：

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

效果如下：

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

<div class="g-content">
  <div class="g-lottery-case">
    <div class="g-left">
      <h2>您已擁有<span class="playnum"></span>次抽獎機會，點擊立刻抽獎！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎"></a>
      </div>
    </div>
  </div>
</div>

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

這里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很簡單的，沒幾個AIP。

二、簡單的樣式：

<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ù)，由后臺傳入
    $('.playnum').html(playnum);//顯示還剩下多少次抽獎機會
    var isture = 0;//是否正在抽獎
    var clickfunc = function() {
      var data = [1, 2, 3, 4, 5, 6];//抽獎
      //data為隨機出來的結(jié)果，根據(jù)概率后的結(jié)果
      data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數(shù)
      switch(data) {
        case 1:
          rotateFunc(1, 0, '恭喜您獲得2000元理財金');
          break;
        case 2:
          rotateFunc(2, 0, '恭喜您獲得2000元理財金2');
          break;
        case 3:
          rotateFunc(3, 0, '恭喜您獲得2000元理財金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; // 標志為 在執(zhí)行
      if(playnum <= 0) { //當抽獎次數(shù)為0的時候執(zhí)行
        alert("沒有次數(shù)了");
        $('.playnum').html(0);//次數(shù)顯示為0
        isture = false;
      } else { //還有次數(shù)就執(zhí)行
        playnum = playnum - 1; //執(zhí)行轉(zhuǎ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)時間
        animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來的結(jié)果加上1440度旋轉(zhuǎn)
        callback: function() {
          isture = false; // 標志為 執(zhí)行完畢
          alert(text);
        }
      });
    };
  });
</script>

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

最后所有代碼為：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>抽獎</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>次抽獎機會，點擊立刻抽獎！~</h2>
      <div class="g-lottery-box">
        <div class="g-lottery-img">
        </div>
        <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎"></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ù)，由后臺傳入
  $('.playnum').html(playnum);//顯示還剩下多少次抽獎機會
  var isture = 0;//是否正在抽獎
  var clickfunc = function() {
    var data = [1, 2, 3, 4, 5, 6];//抽獎
    //data為隨機出來的結(jié)果，根據(jù)概率后的結(jié)果
    data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數(shù)
    switch(data) {
      case 1:
        rotateFunc(1, 0, '恭喜您獲得2000元理財金');
        break;
      case 2:
        rotateFunc(2, 0, '恭喜您獲得2000元理財金2');
        break;
      case 3:
        rotateFunc(3, 0, '恭喜您獲得2000元理財金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; // 標志為 在執(zhí)行
    if(playnum <= 0) { //當抽獎次數(shù)為0的時候執(zhí)行
      alert("沒有次數(shù)了");
      $('.playnum').html(0);//次數(shù)顯示為0
      isture = false;
    } else { //還有次數(shù)就執(zhí)行
      playnum = playnum - 1; //執(zhí)行轉(zhuǎ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)時間
      animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來的結(jié)果加上1440度旋轉(zhuǎn)
      callback: function() {
        isture = false; // 標志為 執(zhí)行完畢
        alert(text);
      }
    });
  };
});
</script>
</body>
</html>

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

#復制下面的圖片名稱-鼠標移到圖片上-右鍵-圖片另存為-粘貼保存#

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

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

3.點擊抽獎按鈕： playbtn.png

總結(jié)

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

相關(guān)文章

最新評論