用CSS實現一個抽獎轉盤

時間 2019-11-21

標籤 css 實現一個抽獎轉盤欄目 CSS 简体版

原文原文鏈接

效果css

基本是用CSS實現的，沒有用圖片，加一丟丟JS。徹底沒有考慮兼容性。html

首先畫一個轉盤，css3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    /* 重置默認樣式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="panel">
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>

效果以下，配色什麼的不要在乎，可能比較醜。。。web

而後寫抽獎指針的小箭頭，用CSS畫三角形是一個比較常見的問題，經過設置width和height爲0，而後用border實現。app

如圖，矩形是由四個三角形邊框組成的，只要設置其它邊顏色爲透明，就能夠得到單獨的三角形。dom

這裏經過僞元素after實現三角形，並經過絕對定位將三角形定位到中間小圓的頂端。ide

.pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
}

如今纔像一個指針了。 wordpress

哦接下來是實現轉盤背景，不一樣的扇區對應不一樣的獎品，這樣就有一個需求：實現任意角度扇形。函數

可能會想固然的認爲和三角形同樣，不過是加一個border-radius而已，高度是圓半徑，寬度是tan(θ/2)，可是實現出來的效果和想象並不同……（可能須要作一些其餘操做以達到效果，可是我沒想到。學習

最後仍是求助了搜索引擎。不得不認可dalao們實在是太nb了，qaq……經過 linear-gradient 實現想法是真的棒。不過還有好多複雜的實現看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3種純CSS實現中間鏤空的12色彩虹漸變圓環方法

實現就是經過兩個正方形取相交區域。

我覺圖畫的仍是挺好的:D

沒有用僞元素實現，由於我還要加文字，至於文字的位置，我真的是瞎調的，反正正經寫代碼也不會這麼寫= =

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sector {
            position: absolute;
            width: 100px;
            height: 200px;
            margin: 100px;
            border-radius: 0px 100px 100px 0;
            overflow: hidden;
            transform: rotate(-18deg);
        }
        .sector-inner {
            text-align: center;
            display: block;
            width: 40px;
            padding: 5px 3px 0 57px;
            height: 195px;
            background: #ffeab1;
            transform: translateX(-100px) rotate(36deg);
            transform-origin: right center;
            border-radius: 100px 0 0 100px;
        }
        .sector-inner span {
            display: block;
            transform-origin: center;
            transform: rotate(-19deg);
            color: #d46854;
        }
    </style>
</head>
<body>
    <div class="sector">
        <div class="sector-inner">
            <span>謝謝參與</span>
        </div>
    </div>
</body>
</html>

效果以下，一個帶有文字的小扇形~~

OK，如今寫一堆扇形放到一開始的轉盤上。

如今的代碼是醬紫滴~~太長了折起來。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    /* 重置默認樣式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      width: 100px;
      height: 200px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      left: 100px;
      top: 0px;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
    .pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>

View Code

嘻嘻，如今是抽獎轉盤的樣子了吧~~~

最後再加點浮誇的燈。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    /* 重置默認樣式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      width: 100px;
      height: 200px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      left: 100px;
      top: 0px;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
    .pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>

View Code

如今轉盤CSS部分基本完成。簡單寫一下JS部分。點擊中間的指針時，指針會轉，能夠拉一條貝塞爾曲線，控制動畫的速度。

貝塞爾曲線能夠簡單的看做是時間-距離曲線，斜率就是速度。由於轉盤的速度確定是先快後慢，隨便拉一條。

http://cubic-bezier.com/#.2,.93,.43,1

CSS中添加屬性

.pointer {
  // ...
  transition: transform 3s cubic-bezier(.2,.93,.43,1);
}

點擊開始抽獎的時候，爲中間的指針加一個旋轉的角度。這裏有一個問題就是不一樣的扇區抽到的機率是相同的，改爲不一樣應該…也蠻簡單的，不過主要是想練下CSS，JS就隨便寫了。

JS部分代碼。。

let getEle = document.getElementsByClassName.bind(document);
let pointer = getEle('pointer')[0];
let result = getEle('result')[0];

let onRotation = false; // 記錄當前是否正在旋轉，若是正在旋轉，就不能繼續點擊了
let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費', '50積分', 
'謝謝參與', '100元話費', '謝謝參與', '50積分', '10元話費'];

// 根據隨機角度獲取獎勵
let getReward = (function() {
  currentDeg = 0;
  return function() {
    // 轉三圈到四圈
    let rotateDeg = Math.random() * 360 + 1080;
    currentDeg += rotateDeg;
    let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
    return {
      deg: currentDeg,
      text: rewardText === '謝謝參與' ? '很遺憾，您沒有得到獎品。' : '恭喜得到: ' + rewardText
    }
  }
})();

pointer.addEventListener('click', () => {
  if (onRotation) return;
  console.log('開始抽獎');
  onRotation = true;
  let nextStatus = getReward();
  console.log(nextStatus)
  result.innerText = nextStatus.text;
  result.style.display = 'none';
  pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
})
pointer.addEventListener('transitionend', () => {
  console.log('抽獎結束');
  onRotation = false;
  result.style.display = 'block';
})

如今一個抽獎轉盤基本完成了，最後一個需求，若是旁邊的等可以亮起來就行了。

至於燈怎麼亮，就須要用到CSS3的動畫了，我還不太熟悉，先去學習一下>_<

我學完回來了，參考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，內容不是不少。

animation-name 指定動畫名稱，

animation-duration 指定動畫持續時間，

animation-timing-function 指定動畫函數，和transition的函數是同樣的，

animation-delay 指定動畫延遲多久後執行，

animation-iteration-count 指定動畫執行多少次，默認爲一次，能夠指定爲infinite，無限循環。

animation-direction 指定動畫屢次播放時，一次結束，下一次怎麼接上一次，如圖。

animation-fill-mode 指定動畫結束後停在什麼位置，默認回到起始狀態，forwards表示讓動畫停留在結束狀態，backwards讓動畫回到第一幀的狀態，both根據animation-direction輪流應用forwards和backwards規則。

animation-play-state 動畫執行狀態，默認爲running，能夠設置爲pause，動畫將在當前狀態中止，再改成running時，會接着上一次中止的位置繼續執行動畫。

使用關鍵字 keyframes 來定義一個動畫。經過百分比指定其中任意幾個狀態。

嘗試着寫一下=。=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 30px;
            width: 30px;
            animation: 1s twinkling 3, 100ms 3s twinkling 3;
        }
        @keyframes twinkling {
            50% { background: red; }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

這是一個方塊，先慢速閃三下，再快速閃三下，最後消失。

animation: 1s twinkling 3;

就至關於

animation-name: twinkling;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 3;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

效果

我以爲還能夠:P 反正我只能寫成這樣了。

最後把動畫加到轉盤的燈上。完成代碼（好像顏色變了，咳，那是由於我animation學了過久都掉色了）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    * { /* 重置默認樣式 */
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      user-select: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #ff5555;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light-twinkling {
      animation: 1s twinkling 3, 100ms 3s twinkling 3;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 100px;
      height: 200px;
      font-size: 14px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #ff5350;
      border-radius: 50%;
      border: 1px solid #ff5350;
      transition: transform 3s cubic-bezier(.2,.93,.43,1);
    }
    .pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #ff5350;
      transform-origin: center;
    }
    .result {
      margin: 20px 60px;
    }

    @keyframes twinkling {
      50% { background: transparent; }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100元話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100元話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
  <div class="result"></div>

  <script>
    let getEle = document.getElementsByClassName.bind(document);
    let pointer = getEle('pointer')[0];
    let result = getEle('result')[0];
    let lights = Array.prototype.slice.call(getEle('light'));

    let onRotation = false; // 記錄當前是否正在旋轉，若是正在旋轉，就不能繼續點擊了
    let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費', '50積分', 
    '謝謝參與', '100元話費', '謝謝參與', '50積分', '10元話費'];

    // 根據隨機角度獲取獎勵
    let getReward = (function() {
      currentDeg = 0;
      return function() {
        // 轉三圈到四圈
        let rotateDeg = Math.random() * 360 + 1080;
        currentDeg += rotateDeg;
        let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
        return {
          deg: currentDeg,
          text: rewardText === '謝謝參與' ? '很遺憾，您沒有得到獎品。' : '恭喜得到: ' + rewardText
        }
      }
    })();

    pointer.addEventListener('click', () => {
      if (onRotation) return;
      console.log('開始抽獎');
      onRotation = true;
      lights.forEach(light => { light.className += ' light-twinkling'; });
      let nextStatus = getReward();
      console.log(nextStatus)
      result.innerText = nextStatus.text;
      result.style.display = 'none';
      pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer.addEventListener('transitionend', () => {
      console.log('抽獎結束');
      setTimeout(() => { // 等閃爍三下結束
        onRotation = false;
        lights.forEach(light => { light.className = 'light'; });
        result.style.display = 'block';
      }, 300);
    })
  </script>
</body>
</html>

1. 用CSS實現一個抽獎轉盤
2. 轉盤抽獎js實現
3. JS實現抽獎轉盤
4. js實現轉盤抽獎
5. js 抽獎轉盤實現
6. Android實現抽獎轉盤
7. jquery實現抽獎轉盤
8. canvas轉盤抽獎的實現(一)
9. 利用canvas實現抽獎轉盤
10. 利用jqueryRotare實現抽獎轉盤
更多相關文章...
• 第一個MyBatis程序 - MyBatis教程
• 第一個Hibernate程序 - Hibernate教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。