原生JS實(shí)現(xiàn)簡易轉(zhuǎn)盤抽獎
加入技術(shù)交流群
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>turntable</title>
/*<link rel="stylesheet" href="css/index.css">*/
<!-- 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)識樣式 */
tr .active {
background-color: #ff6700;
}
/* 設(shè)置中獎結(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>
<td>今</td>
<td>天</td>
<td>吃</td>
</tr>
<tr>
<td>什</td>
<th id="play">開始</th>
<td>么</td>
</tr>
<tr>
<td>來</td>
<td>抽</td>
<td>下</td>
</tr>
</table>
<div>今天吃火鍋</div>
</div>
<!-- <script src="js/index.js"></script> -->
<!-- js -->
<script>
// 獲取開始元素
var playBtn = document.getElementById('play');
// 獲取所有td元素，獲取到偽數(shù)組
var tdAry = document.getElementsByTagName('td');
// 將偽數(shù)組的長度存儲在tdLen變量中
var tdLen = tdAry.length;
// 設(shè)置計(jì)時(shí)器變量，剛開始為空
var startTime = null;
// 自己構(gòu)造數(shù)組，使橘紅色背景能夠按照自己想要的方向進(jìn)行循環(huán)移動
var tdList = [0, 1, 2, 4, 7, 6, 5, 3];
// 設(shè)置橘紅色背景標(biāo)識
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é)果元素
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)識就加1
tdId++;
// 判斷如果標(biāo)識大于7的話就標(biāo)識tdId就等于0，否則的話就等于它本身，這個(gè)步驟如果沒有進(jìn)行判斷和賦值的話，tdId就會一直自增下去，那么對應(yīng)的td元素將沒有，后臺就會報(bào)錯
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é)束。這個(gè)步驟是控制抽獎結(jié)束。
if (time >= MaxNum) {
clearInterval(startTime);
startTime = null;
// switch語句判斷抽獎結(jié)果，這部分比較簡單，就不贅述了。
switch(tdList[tdId]) {
case 0:
results.innerText = '今天吃轉(zhuǎn)轉(zhuǎn)樂';
results.style.display = 'block';
break;
case 1:
results.innerText = '今天吃蜀九香';
results.style.display = 'block';
break;
case 2:
results.innerText = '今天吃KFC';
results.style.display = 'block';
break;
case 4:
results.innerText = '今天吃海底撈';
results.style.display = 'block';
break;
case 7:
results.innerText = '今天吃外賣';
results.style.display = 'block';
break;
case 6:
results.innerText = '今天吃土';
results.style.display = 'block';
break;
case 5:
results.innerText = '今天吃牛排';
results.style.display = 'block';
break;
case 3:
results.innerText = '今天吃草本湯';
results.style.display = 'block';
break;
}
return;
}
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/Counterrr/p/10599291.html
*博客內(nèi)容為網(wǎng)友個(gè)人發(fā)布，僅代表博主個(gè)人觀點(diǎn)，如有侵權(quán)請聯(lián)系工作人員刪除。
逆變器相關(guān)文章:逆變器原理
西門子plc相關(guān)文章:西門子plc視頻教程
逆變器相關(guān)文章:逆變器工作原理
