基于JavaScript實(shí)現(xiàn)輪盤(pán)抽獎(jiǎng)功能

更新時(shí)間：2023年01月13日 14:50:52 作者：靜Yu

對(duì)于有選擇困難癥的朋友來(lái)說(shuō)，有個(gè)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能再好不過(guò)了，今天通過(guò)本文給大家分享基于Js實(shí)現(xiàn)輪盤(pán)抽獎(jiǎng)功能，感興趣的朋友一起看看吧

不知道今天自己該吃什么，一招幫你解決選擇困難癥。
通過(guò)html+css+js實(shí)現(xiàn)一個(gè)輪盤(pán)抽獎(jiǎng)功能。我們可以將平時(shí)吃的飯菜輸入到代碼中，每到糾結(jié)的時(shí)候只需點(diǎn)開(kāi)抽一次就可以了。

在這里插入圖片描述

實(shí)現(xiàn)步驟

html代碼：

整體實(shí)現(xiàn)的結(jié)構(gòu)是一個(gè)大的圓形，分成了左右兩個(gè)部分。從上面的圖片中我們可以看出，我們是將整個(gè)圓形分成了八塊的，實(shí)現(xiàn)方法就是css的旋轉(zhuǎn)。

<div class="outher">
    <div class="wapper">
        <div class="left">
                <div class="one"> <span class="text"></span></div>
                <div class="two"> <span class="text"></span></div>
                <div class="three"> <span class="text"></span></div>
                <div class="four"> <span class="text"></span></div>
        </div>
        <div class="right">
            <div class="one"> <span class="text"></span></div>
            <div class="two"> <span class="text"></span></div>
            <div class="three"> <span class="text"></span></div>
            <div class="four"> <span class="text"></span></div>
        </div>
     </div>
     <div class="circle">
             抽獎(jiǎng)
     </div>
</div>

css代碼：

給body設(shè)置為flex布局，設(shè)置了水平和垂直居中，讓整個(gè)輪播處于屏幕的中間。

     *{
         margin:0;
         padding:0;
     }

     body{
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
     }

.outher是整個(gè)div塊的樣式設(shè)置，設(shè)置為一個(gè)圓形.
.wapper是將整個(gè)圓形分為八個(gè)部分，transform:rotate(22.5deg)定義 2D 旋轉(zhuǎn)，選擇了22.5deg正好使得箭頭正對(duì)著每一部分的中間位置。

     .outher{
         width:300px;
         height: 300px;
         position: relative;
         border-radius: 50%;
     }

     .wapper{
         width:300px;
         height: 300px;
         border-radius: 50%;
         overflow: hidden;
         transform:rotate(22.5deg);
      }

在這里插入圖片描述

整個(gè)圓的寬度為300px，分成兩部分每一部分都是150px。

  .left{
          position: absolute;
          width: 150px;
          height: 300px;
          left:0;
          overflow: hidden;
      }
   .right{
          position: absolute;
          width: 150px;
          height: 300px;
          right:0;
          overflow: hidden;
          text-align: center;
      }

這里設(shè)置的transform-origin: right center左半部分以右側(cè)的中心點(diǎn)為轉(zhuǎn)軸旋轉(zhuǎn)，右半部分以左側(cè)的中心點(diǎn)為旋轉(zhuǎn)軸旋轉(zhuǎn)。第一個(gè)div塊不需要旋轉(zhuǎn)，兩部分因分別分成了4塊，所以第二個(gè)旋轉(zhuǎn)的度數(shù)就是45deg，第三個(gè)就是90deg。而且給每一部分設(shè)置交叉的顏色，區(qū)分開(kāi)每一塊。

    .left div{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        transform-origin: right center;
    }
    .left div.one{
        background-color: #FC7C7B;
    }  
    .left div.two{
        background-color: #F59462;
        transform:rotate(-45deg);
    }
    .left div.three{
        background-color: #FC7C7B;
        transform:rotate(-90deg);
    }

    .left div.four{
        background-color: #F59462;
        transform:rotate(-135deg);
    } 
    
   .right div{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        transform-origin: left center;
    } 
    .right div.one{
        background-color: #F59462;
    }
    .right div.two{
        background-color: #FC7C7B;
        transform:rotate(45deg);
    }
    .right div.three{
        background-color: #F59462;
        transform:rotate(90deg);
    }
    .right div.four{  
        background-color: #FC7C7B;
        transform:rotate(135deg);
    }

每一小部分中文字的樣式設(shè)置，分別旋轉(zhuǎn)22.5deg處于每一部分的中間位置。

  .left .text{
          position: absolute;
          top:30px;
          left:55%;
          transform:rotate(-22.5deg);
          text-align: center;
      }

      .right .text{
          position: absolute;
          top:25px;
          left:11%;
          transform:rotate(22.5deg);
          text-align: center;
      }

這一部分就是中間抽獎(jiǎng)和箭頭的樣式設(shè)置了。箭頭就是一個(gè)三角形，位置正好處于小圓型的正中心。

    .circle{
        width: 100px;
        height: 100px;
        background-color: white;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
    }
    
    .circle:after{
         width: 0;
         height: 0;
         border:40px solid white;
         border-left-width: 10px;
         border-right-width: 10px;
         position: absolute;
         content:"";
         border-left-color: transparent;
         border-top-color: transparent;
         border-right-color: transparent;
         top:-70px;
         left:calc(50% - 10px);
         z-index: -1;
    }

js代碼：

在抽獎(jiǎng)的過(guò)程中，不允許再次點(diǎn)擊就設(shè)置了一個(gè)isFlag，只有當(dāng)isFlag=true點(diǎn)擊的時(shí)候才會(huì)觸發(fā)后面的事件。生成一個(gè)隨機(jī)數(shù)random，然后再執(zhí)行switch函數(shù)，然后執(zhí)行相應(yīng)的run函數(shù)，run函數(shù)傳遞兩個(gè)參數(shù)angle角度,text[random]隨機(jī)的一種菜。

  let wapper = document.querySelector(".wapper");
        let textAll = document.querySelectorAll(".wapper .text");
        let text = ["黃燜雞","麻辣燙","蛋炒飯","燒烤","火鍋","熱干面","牛排","螺螄粉"];
        for(let i = 0 ; i < textAll.length ; i++){
                textAll[i].innerHTML = text[i];  
        }
        let isFlag = true;

         document.querySelector(".circle").onclick=function(){ 
            if(isFlag){
                let random = parseInt(Math.random()*8)
                switch(random){
                    case 0:
                        run(22.5,text[random]);
                        break;
                    case 1:
                        run(66.5,text[random]);
                        break;
                    case 2:
                        run(112.5,text[random]); 
                        break;
                    case 3:
                        run(157.5,text[random]);
                        break;
                    case 4:
                        run(338.5,text[random]);
                        break;
                    case 5:
                        run(294.5,text[random]);
                        break;   
                    case 6:
                        run(247.5,text[random]);
                        break;
                    case 7:
                        run(201.5,text[random]);
                        break;    
                }
            }    
        };

下面的就是run函數(shù)的定義，為了讓整個(gè)輪盤(pán)多轉(zhuǎn)幾圈，我們先設(shè)置了一個(gè)基礎(chǔ)角度basic=1800，可能一開(kāi)始的旋轉(zhuǎn)效果比較生硬，這里我們添加一個(gè)緩動(dòng)動(dòng)畫(huà)效果，緩動(dòng)動(dòng)畫(huà)公式（結(jié)束位置 - 起始位置）* 緩動(dòng)系數(shù)（0~1）。

      function run(angle,text){
        isFlag = false;
        let begin = 0; 
        let timer = null;
        let basic = 1800;
        timer = setInterval(function(){
            if(begin > (basic+angle)){
                isFlag = true;
                clearInterval(timer);
            }
            wapper.style.transform="rotate("+(begin)+"deg)";
            begin+=Math.ceil(basic+angle-begin)*0.1;
        },70);
    }

到此這篇關(guān)于Js實(shí)現(xiàn)輪盤(pán)抽獎(jiǎng)功能的文章就介紹到這了,更多相關(guān)js輪盤(pán)抽獎(jiǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: