基于JavaScript實現(xiàn)輪盤抽獎功能
更新時間：2023年01月13日 14:50:52 作者：靜Yu
對于有選擇困難癥的朋友來說，有個轉盤抽獎功能再好不過了，今天通過本文給大家分享基于Js實現(xiàn)輪盤抽獎功能，感興趣的朋友一起看看吧
不知道今天自己該吃什么，一招幫你解決選擇困難癥。
通過html+css+js實現(xiàn)一個輪盤抽獎功能。我們可以將平時吃的飯菜輸入到代碼中，每到糾結的時候只需點開抽一次就可以了。
實現(xiàn)步驟
html代碼：
整體實現(xiàn)的結構是一個大的圓形，分成了左右兩個部分。從上面的圖片中我們可以看出，我們是將整個圓形分成了八塊的，實現(xiàn)方法就是css的旋轉。
<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">
抽獎
</div>
</div>css代碼：
給body設置為flex布局，設置了水平和垂直居中，讓整個輪播處于屏幕的中間。
*{
margin:0;
padding:0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}.outher是整個div塊的樣式設置，設置為一個圓形..wapper是將整個圓形分為八個部分，transform:rotate(22.5deg)定義 2D 旋轉，選擇了22.5deg正好使得箭頭正對著每一部分的中間位置。
.outher{
width:300px;
height: 300px;
position: relative;
border-radius: 50%;
}
.wapper{
width:300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
transform:rotate(22.5deg);
}
整個圓的寬度為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;
}這里設置的transform-origin: right center左半部分以右側的中心點為轉軸旋轉，右半部分以左側的中心點為旋轉軸旋轉。第一個div塊不需要旋轉，兩部分因分別分成了4塊，所以第二個旋轉的度數(shù)就是45deg，第三個就是90deg。而且給每一部分設置交叉的顏色，區(qū)分開每一塊。
.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);
}
每一小部分中文字的樣式設置，分別旋轉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;
}這一部分就是中間抽獎和箭頭的樣式設置了。箭頭就是一個三角形，位置正好處于小圓型的正中心。
.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代碼：
在抽獎的過程中，不允許再次點擊就設置了一個isFlag，只有當isFlag=true點擊的時候才會觸發(fā)后面的事件。生成一個隨機數(shù)random，然后再執(zhí)行switch函數(shù)，然后執(zhí)行相應的run函數(shù)，run函數(shù)傳遞兩個參數(shù)angle角度,text[random]隨機的一種菜。
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ù)的定義，為了讓整個輪盤多轉幾圈，我們先設置了一個基礎角度basic=1800，可能一開始的旋轉效果比較生硬，這里我們添加一個緩動動畫效果，緩動動畫公式 （結束位置 - 起始位置）* 緩動系數(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);
}到此這篇關于Js實現(xiàn)輪盤抽獎功能的文章就介紹到這了,更多相關js輪盤抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了jquery單行文字向上滾動效果的具體實現(xiàn)，此效果適應于很多場景，會的不會的都要學習下啊2014-09-09
這里延遲加載的意思是，拖動滾動條時，在圖片出現(xiàn)在瀏覽器顯示區(qū)域后才加載顯示。2013-07-07
Javascript是一門基于對象的動態(tài)語言，也就是說，所有東西都是對象，一個很典型的例子就是函數(shù)也被視為普通的對象。Javascript可以通過一定的設計模式來實現(xiàn)面向對象的編程，其中this指針就是實現(xiàn)面向對象的一個很重要的特性。2015-07-07
JavaScript設計模式之緩存代理模式原理與簡單用法示例
這篇文章主要介紹了JavaScript設計模式之緩存代理模式原理與簡單用法,結合實例形式簡要分析了javascript緩存代理模式的基本原理、使用方法及相關操作注意事項,需要的朋友可以參考下2018-08-08
在XX項目里面需要通過一個iframe去刷新同一窗口的另外一個iframe。一個超級簡單的處理，但我還在blog上記一記，有些看似簡單的東西，在真實項目應用中還是值得思考地方2011-01-01
這篇文章主要介紹了JS實現(xiàn)換膚功能的方法,結合實例形式分析了javascript針對頁面元素屬性與樣式動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
詳解如何通過JavaScript實現(xiàn)函數(shù)重載
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)函數(shù)重載，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，感興趣的可以了解一下2023-01-01
項目中經(jīng)常會遇到縮略展示文字的場景,即要求文字在一行不換行展示,超出自動展示...,常用的展示效果有兩種,文字中間縮略以及文字末尾縮略,本文將通過代碼示例給大家詳細的講一下這兩種方案,需要的朋友可以參考下2024-06-06
淺談js對象的創(chuàng)建和對6種繼承模式的理解和遐想
下面小編就為大家?guī)硪黄獪\談js對象的創(chuàng)建和對6種繼承模式的理解和遐想。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js is_valid_filename驗證文件名的函數(shù)
有時候我們需要對文件名進行控制，包括一些特殊命名的文件與特殊符號的文件名進程替換，那么就可以使用下面的函數(shù)2017-07-07