你的位置:首页 > Java教程

[Java教程]【回忆1314】抽奖之大富翁


直接看效果点这里

<!doctype html><html><head>  <meta charset="UTF-8">  <title> 大富翁 </title>  <style>    ul {list-style: none; }    .lottery { position: relative; width: 184px; height: 184px; line-height: 58px; text-align: center; overflow: hidden; margin: 0 auto; }    .lottery li, .lottery .btn { position: absolute; width: 60px; height: 60px; border: 1px #ccc solid; z-index: 1; }    .lottery .item-1 { top: 0; left: 0; }    .lottery .item-2 { top: 0; left: 61px; }    .lottery .item-3 { top: 0; left: 122px; }    .lottery .item-4 { top: 61px; left: 122px; }    .lottery .item-5 { top: 122px; left: 122px; }    .lottery .item-6 { top: 122px; left: 61px; }    .lottery .item-7 { top: 122px; left: 0; }    .lottery .item-8 { top: 61px; left: 0; }    .lottery .active { border-color: red; z-index: 2; }    .lottery .btn { width: 62px; height: 62px; top: 61px; left: 61px; background-color: transparent; cursor: pointer; }  </style></head><body>  <div class="lottery">    <ul class="list">      <li class="item-1 active">1</li>      <li class="item-2">2</li>      <li class="item-3">3</li>      <li class="item-4">4</li>      <li class="item-5">5</li>      <li class="item-6">6</li>      <li class="item-7">7</li>      <li class="item-8">8</li>    </ul>    <button class="btn">抽奖</button>  </div>  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>  <script>    // 假设iEnd是请求获得的奖品结果    var iEnd = -1;    $('.btn').on('click', function(){      var $this = $(this);      // 这个setTimeout是假设的请求      setTimeout(function(){        iEnd = Math.floor(Math.random() * 8);        console.log(iEnd);      }, 3000);      // 禁用      $this.attr('disabled', 'disabled');      draw($('.lottery'), function(){        // 第一个奖品是0哦~        alert('您中到了奖品号下标是:'+ iEnd + ',奖品数字是:'+ (iEnd + 1));        // 恢复按钮        $this.removeAttr('disabled');      });    });    // 开始转动    function draw(oMain, fn){      var timer = null,        iNow = oMain.find('.active').index(),        len = oMain.find('li').length,        circle = 5, // 至少要转几圈        iSpeed = 300,        count = 0, // 转了多少次        iLast = len; // 最后一次转圈圈        (function run(){          // 前3个加速          if(count > 2){ iSpeed = 100; }          // 后3个减速          if(iLast < 2){ iSpeed = 300; }          iNow++;          count++;          if(iNow >= len){ iNow = 0; circle--; }          oMain.find('li').removeClass('active').eq(iNow).addClass('active');          timer = setTimeout(run, iSpeed);          // 得到结果          if(iEnd !== -1 && circle <= 0 && iNow == iEnd){            // 为了最后一圈减速,再跑一圈            iLast--;            if(iLast == 0){              clearTimeout(timer);              fn();            }          }        })();    }  </script></body></html>