原生JS實(shí)現(xiàn)簡(jiǎn)易轉(zhuǎn)盤抽獎(jiǎng)

發(fā)布人：lantu 時(shí)間：2020-06-28 來源：工程師

加入技術(shù)交流群
- 掃碼加入
  和技術(shù)大咖面對(duì)面交流
  海量資料庫查詢

發(fā)布文章

<!DOCTYPE html>

<html>

<head>

<title>turntable</title>

/*<link rel="stylesheet" href="css/index.css">*/

<style>

body, table, tr, td {

margin: 0;

padding: 0;

}

.wrapper {

position: relative;

width: 300px;

height: 300px;

margin: 100px auto 0;

text-align: center;

}

table {

display: inline-block;

}

td, th {

width: 100px;

height: 100px;

border: 1px solid #ccc;

border-radius: 20px;

}

th {

cursor: pointer;

user-select: none;

}

/* 設(shè)置標(biāo)識(shí)樣式 */

tr .active {

background-color: #ff6700;

}

/* 設(shè)置中獎(jiǎng)結(jié)果 */

.results {

display: none;

position: absolute;

top: 0;

left: 50px;

width: 200px;

height: 100px;

border: 1px solid black;

border-radius: 30px;

text-align: center;

line-height: 100px;

background-color: skyblue;

}

</style>

</head>

<body>

<div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<div>今天吃火鍋</div>

</div>

// 獲取開始元素

var playBtn = document.getElementById('play');

// 獲取所有td元素，獲取到偽數(shù)組

var tdAry = document.getElementsByTagName('td');

// 將偽數(shù)組的長(zhǎng)度存儲(chǔ)在tdLen變量中

var tdLen = tdAry.length;

// 設(shè)置計(jì)時(shí)器變量，剛開始為空

var startTime = null;

// 自己構(gòu)造數(shù)組，使橘紅色背景能夠按照自己想要的方向進(jìn)行循環(huán)移動(dòng)

var tdList = [0, 1, 2, 4, 7, 6, 5, 3];

// 設(shè)置橘紅色背景標(biāo)識(shí)

var tdId = 0;

// 設(shè)置已經(jīng)奔跑的次數(shù)，剛開始為0次

var time = 0;

// 固定跑3圈，一圈8次

var fixNum = 24

// 定義最大隨機(jī)數(shù)

var MaxNum;

// 定義隨機(jī)數(shù)，開始和結(jié)束的閾值

var randomNum;

// 獲取中獎(jiǎng)結(jié)果元素

var results = document.getElementsByClassName('results')[0];

// 綁定點(diǎn)擊事件，當(dāng)鼠標(biāo)點(diǎn)擊開始按鈕后，觸發(fā)playStart函數(shù)

playBtn.onclick = playStart;

function playStart() {

// 如果計(jì)時(shí)器不為空，那就意味著這個(gè)線程已經(jīng)在跑了，就直接退出。

if (startTime != null) {

return;

}

results.style.display = 'none';

// 奔跑的次數(shù)

time = 0;

// 最大隨機(jī)數(shù)，取值[0, 8]，確保每個(gè)都能被選到

MaxNum = parseInt(Math.random() * 9) + fixNum;

// 隨機(jī)閾值，控制剛開始跑幾步加速，以及剩幾步減速，取值范圍[3, 7]

randomNum = parseInt(Math.random() * 5 + 3);

// 開啟計(jì)時(shí)器，每200毫秒執(zhí)行一次move函數(shù)

startTime = setInterval(move,200);

}

function move() {

// 每執(zhí)行一次奔跑次數(shù)time就加1

time++;

// 每次運(yùn)行當(dāng)前的背景色清空

tdAry[tdList[tdId]].className = "";

// 每執(zhí)行一次背景色標(biāo)識(shí)就加1

tdId++;

// 判斷如果標(biāo)識(shí)大于7的話就標(biāo)識(shí)tdId就等于0，否則的話就等于它本身，這個(gè)步驟如果沒有進(jìn)行判斷和賦值的話，tdId就會(huì)一直自增下去，那么對(duì)應(yīng)的td元素將沒有，后臺(tái)就會(huì)報(bào)錯(cuò)

tdId = tdId > 7 ? 0 : tdId;

// 設(shè)置當(dāng)前的td背景色

tdAry[tdList[tdId]].className = "active";

//如果奔跑的次數(shù)等于隨機(jī)閾值的話，那么當(dāng)前的計(jì)時(shí)器清空，重新開啟一個(gè)新的計(jì)時(shí)器，并且是每20毫秒執(zhí)行一次，這個(gè)步驟是控制加速的

if (time == randomNum) {

clearInterval(startTime);

startTime = setInterval(move,20);

}

// 如果奔跑的次數(shù)加上隨機(jī)的閾值的話，那么就將當(dāng)前的加速的計(jì)時(shí)器清空，并且重新開啟一個(gè)每200毫秒的計(jì)時(shí)器，這個(gè)步驟是控制減速的

if (time + randomNum >= MaxNum) {

clearInterval(startTime);

startTime = setInterval(move,200);

}

// 如果奔跑的次數(shù)大于等于最大的奔跑次數(shù)，那么清空當(dāng)前計(jì)時(shí)器，并且計(jì)時(shí)器等于null，直接返回出去，一次抽獎(jiǎng)結(jié)束。這個(gè)步驟是控制抽獎(jiǎng)結(jié)束。

if (time >= MaxNum) {

clearInterval(startTime);

startTime = null;

// switch語句判斷抽獎(jiǎng)結(jié)果，這部分比較簡(jiǎn)單，就不贅述了。

switch(tdList[tdId]) {

case 0:

results.innerText = '今天吃轉(zhuǎn)轉(zhuǎn)樂';