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

JavaScript實(shí)現(xiàn)九宮格抽獎

 更新時間：2022年06月28日 15:10:18   作者：stones4zd  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)九宮格抽獎的具體代碼，供大家參考，具體內(nèi)容如下

看到個抽獎案例，覺得還不錯。就自己做了一個簡單版本。

點(diǎn)擊中間的開始，抽獎就會跑起來，速度由慢到快，再到慢，最后停下。停下的格子就是中獎的獎品。

主要思路：

1、抽獎的高亮色塊輪循，使用一個 class 去控制。

2、要控制色塊輪循的速度快慢，要用到計(jì)時器 setTimeout，可以控制輪循速度。

3、正在抽獎輪循的時候，開始按鈕是不能點(diǎn)擊的。所以要用一個變量判斷當(dāng)前是否正在輪循。

4、輪循的次數(shù)是一個隨機(jī)數(shù)，這樣每次開始輪循的結(jié)果都是隨機(jī)的。

HTML

<div class="box" id="box">
? ? <ul>
? ? ? ? <li>0</li>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li id="start">開始</li>
? ? ? ? <li>5</li>
? ? ? ? <li>6</li>
? ? ? ? <li>7</li>
? ? ? ? <li>8</li>
? ? </ul>
</div>

開始菜單在中間，因此輪循環(huán)的獎品 li ，其實(shí)是 0 -3 ，5-8 這幾個 li。

CSS

.box{
? ? width: 300px;
? ? height: 300px;
? ? margin-left: auto;
? ? margin-right: auto;
}
.box li{
? ? width: 98px;
? ? height: 98px;
? ? float: left;
? ? margin-left: 1px;
? ? margin-right: 1px;
? ? margin-bottom: 1px;
? ? margin-top: 1px;
? ? background: #b2967d;
}
.box .show{
? ? background: #ffb8af;
}

色塊高亮，用的是一個類去控制。所以，要在樣式里把類 show 寫好。

JavaScript代碼

let box = document.getElementById("box");
let start = document.getElementById("start");
let li = box.querySelectorAll("li");
let indexArr = [0,1,2,5,8,7,6,3];

因?yàn)檫@里 li 是直接浮動的，而輪循的標(biāo)簽是圍繞 start 一圈的，順序不是 0-8依次增長的。所以，用了一個數(shù)組 indexArr 來控制輪循的標(biāo)簽的索引順序。

方塊的高亮添加和去掉，利用了兩個工具函數(shù)：

?// 查找兄弟標(biāo)簽
? ? let findeSibling = (tag)=>{
? ? ? ? let arr = [];
? ? ? ? for(let i=0; i<= li.length-1 ; i++){
? ? ? ? ? ?if( li[i] === tag ){
? ? ? ? ? ? ? ?continue ;
? ? ? ? ? ?}
? ? ? ? ? ?arr.push( li[i] ?);
? ? ? ? }
? ? ? ? return arr ;
? ? };
? ? // 當(dāng)前標(biāo)簽添加類名 cName，兄弟標(biāo)簽去掉類名 cName。
? ? let tagAddClass = function( tag,cName ){
? ? ? ? ? let siblings = findeSibling(tag);
? ? ? ? ? for(let i=0 ; i<= siblings.length-1 ; i++ ){
? ? ? ? ? ? ? ? siblings[i].classList.remove(cName );
? ? ? ? ? }
? ? ? ? ? tag.classList.add( cName );
? ? };

一些變量設(shè)定：

let speed = 250 ;
let myset = null;
let index = 0 ;
let times = 0 ; // 輪循的次數(shù)
let isGoing = 0 ; // 判斷是否正在輪循，默認(rèn) 否。
let startEndTimes = 10 ; // 開頭和結(jié)束的緩沖次數(shù)
let startTimes =times-startEndTimes ; ? ? // 開頭, 輪循環(huán)次數(shù)
let endTimes = startEndTimes ; ? // 結(jié)束, 輪循環(huán)次數(shù)

speed 輪循的速度。

index 表示當(dāng)前索引，默認(rèn)為 0 。從索引為 0 的標(biāo)簽開始。

times 用來表示每次輪循的次數(shù)，默認(rèn)為 0。這個數(shù)據(jù)，在點(diǎn)擊start 后，會生成一個隨機(jī)數(shù)來替代它的值。

isGoing 是否在輪循。是的話，為 1；否，為 0（默認(rèn)）。用來判斷是否輪循，防止多次點(diǎn)擊 start。如果在輪循，是不允許點(diǎn)擊 start 的。

startTimes，endTimes  ，因?yàn)檩喲拈_始和結(jié)尾的時候，速度會發(fā)生變化，所以要判斷，是否進(jìn)入到開始和結(jié)束的狀態(tài)。

startEndTimes，設(shè)定開始和結(jié)束的緩沖次數(shù)都是 10 次。

點(diǎn)擊按鈕，開始輪循~

?tagAddClass( li[index], "show"); ?// 默認(rèn)顯示 0?
?
let startFun = function(event){
? ? ? ? if( isGoing ){ // 判斷是否正在輪循, 是，就終止函數(shù)。
? ? ? ? ? ? return ?; ?// 防止重復(fù)點(diǎn)擊
? ? ? ? }
? ? ? ? isGoing = 1 ;
? ? ? ? times = Math.floor(Math.random()*20)+30;
? ? ? ? startTimes = startEndTimes; ? ? // 開頭, 輪循環(huán)次數(shù)
? ? ? ? endTimes = times-startEndTimes ; ? // 結(jié)束, 輪循環(huán)次數(shù)
? ? ? ? myset = setTimeout(goFun,speed);
?};
?
start.addEventListener("click",startFun);

關(guān)鍵的 goFun 函數(shù)：

?let goFun = function(){
? ? ? ? index++;
? ? ? ? if( index > indexArr.length-1 ){
? ? ? ? ? ? index = 0;
? ? ? ? }
? ? ? ? tagAddClass( li[ indexArr[index] ], "show");
? ? ? ? times -- ;
? ? ? ? if( times>=startTimes ){ ?// 開始階段，speed 加速，減少值
? ? ? ? ? ? speed -= 20 ;
? ? ? ? }
? ? ? ? if( times <= endTimes ){ ?// 結(jié)束階段，speed 減速，增加值
? ? ? ? ? ? speed += 20
? ? ? ? }
? ? ? ? if( times<=0 ){ ?// 次數(shù)完畢，結(jié)束輪循
? ? ? ? ? ? isGoing = 0 ;
? ? ? ? ? ? clearTimeout(myset); ?// 停止計(jì)時器，釋放資源
? ? ? ? ? ?console.info( indexArr[index] ); ?// 彈出當(dāng)前的標(biāo)簽，這個就是中獎的內(nèi)容~！
? ? ? ? ? ? return false; ?// 終止函數(shù)運(yùn)行，結(jié)束循環(huán)。
? ? ? ? }
? ? ? ? myset = setTimeout(goFun,speed);
};

完整 JS 代碼：

{
? ? let box = document.getElementById("box");?
? ? let start = document.getElementById("start");
? ? let li = box.querySelectorAll("li");
? ? let indexArr = [0,1,2,5,8,7,6,3];
? ? // 查找兄弟標(biāo)簽
? ? let findeSibling = (tag)=>{
? ? ? ? let arr = [];
? ? ? ? for(let i=0; i<= li.length-1 ; i++){
? ? ? ? ? ?if( li[i] === tag ){
? ? ? ? ? ? ? ?continue ;
? ? ? ? ? ?}
? ? ? ? ? ?arr.push( li[i] ?);
? ? ? ? }
? ? ? ? return arr ;
? ? };
? ? // 當(dāng)前標(biāo)簽添加類名 cName，兄弟標(biāo)簽去掉類名 cName。
? ? let tagAddClass = function( tag,cName ){
? ? ? ? ? let siblings = findeSibling(tag);
? ? ? ? ? for(let i=0 ; i<= siblings.length-1 ; i++ ){
? ? ? ? ? ? ? ? siblings[i].classList.remove(cName );
? ? ? ? ? }
? ? ? ? ? tag.classList.add( cName );
? ? };
? ? let speed = 250 ;
? ? let myset = null;
? ? let index = 0 ;
? ? let times = 0 ; // 輪循的次數(shù)
? ? let isGoing = 0 ; // 判斷是否正在輪循，默認(rèn) 否。
? ? let startEndTimes = 10 ; // 開頭和結(jié)束的緩沖次數(shù)
? ? let startTimes =times-startEndTimes ; ? ? // 開頭, 輪循環(huán)次數(shù)
? ? let endTimes = startEndTimes ; ? // 結(jié)束, 輪循環(huán)次數(shù)
? ? let goFun = function(){
? ? ? ? index++;
? ? ? ? if( index > indexArr.length-1 ){
? ? ? ? ? ? index = 0;
? ? ? ? }
? ? ? ? tagAddClass( li[ indexArr[index] ], "show");
? ? ? ? times -- ;
? ? ? ? if( times>=startTimes ){ ?// 開始階段，speed 加速，減少值
? ? ? ? ? ? speed -= 20 ;
? ? ? ? }
? ? ? ? if( times <= endTimes ){ ?// 結(jié)束階段，speed 減速，增加值
? ? ? ? ? ? speed += 20
? ? ? ? }
? ? ? ? if( times<=0 ){ ?// 次數(shù)完畢，結(jié)束輪循
? ? ? ? ? ? isGoing = 0 ;
? ? ? ? ? ? clearTimeout(myset); ?// 停止計(jì)時器，釋放資源
? ? ? ? ? ?console.info( indexArr[index] ); ?// 彈出當(dāng)前的標(biāo)簽，這個就是中獎的內(nèi)容~！
? ? ? ? ? ? return false; ?// 終止函數(shù)運(yùn)行，結(jié)束循環(huán)。
? ? ? ? }
? ? ? ? myset = setTimeout(goFun,speed);
? ? };
? ? tagAddClass( li[index], "show"); ?// 默認(rèn)顯示 0
? ? let startFun = function(event){
? ? ? ? if( isGoing ){ // 判斷是否正在輪循, 是，就終止函數(shù)。
? ? ? ? ? ? return ?; ?// 防止重復(fù)點(diǎn)擊
? ? ? ? }
? ? ? ? isGoing = 1 ;
? ? ? ? times = Math.floor(Math.random()*20)+30;
? ? ? ? startTimes =times-startEndTimes ; ? ? // 開頭, 輪循環(huán)次數(shù)
? ? ? ? endTimes = startEndTimes ; ? // 結(jié)束, 輪循環(huán)次數(shù)
? ? ? ? console.info( times, startTimes, endTimes);
? ? ? ? myset = setTimeout(goFun,speed);
? ? };
?
? ? start.addEventListener("click",startFun);
}

樣式寫的很簡單，基本原理就是這樣~！

大家可以自行擴(kuò)展。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論