原生JS实现简易转盘抽奖

发布人：lantu 时间：2020-06-28 来源：工程师发布文章

<!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;

}

/* 设置标识样式 */

tr .active {

background-color: #ff6700;

}

/* 设置中奖结果 */

.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元素，获取到伪数组

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

// 将伪数组的长度存储在tdLen变量中

var tdLen = tdAry.length;

// 设置计时器变量，刚开始为空

var startTime = null;

// 自己构造数组，使橘红色背景能够按照自己想要的方向进行循环移动

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

// 设置橘红色背景标识

var tdId = 0;

// 设置已经奔跑的次数，刚开始为0次

var time = 0;

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

var fixNum = 24

// 定义最大随机数

var MaxNum;

// 定义随机数，开始和结束的阈值

var randomNum;

// 获取中奖结果元素

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

// 绑定点击事件，当鼠标点击开始按钮后，触发playStart函数

playBtn.onclick = playStart;

function playStart() {

// 如果计时器不为空，那就意味着这个线程已经在跑了，就直接退出。

if (startTime != null) {

return;

}

results.style.display = 'none';

// 奔跑的次数

time = 0;

// 最大随机数，取值[0, 8]，确保每个都能被选到

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

// 随机阈值，控制刚开始跑几步加速，以及剩几步减速，取值范围[3, 7]

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

// 开启计时器，每200毫秒执行一次move函数

startTime = setInterval(move,200);

}

function move() {

// 每执行一次奔跑次数time就加1

time++;

// 每次运行当前的背景色清空

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

// 每执行一次背景色标识就加1

tdId++;

// 判断如果标识大于7的话就标识tdId就等于0，否则的话就等于它本身，这个步骤如果没有进行判断和赋值的话，tdId就会一直自增下去，那么对应的td元素将没有，后台就会报错

tdId = tdId > 7 ? 0 : tdId;

// 设置当前的td背景色

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

//如果奔跑的次数等于随机阈值的话，那么当前的计时器清空，重新开启一个新的计时器，并且是每20毫秒执行一次，这个步骤是控制加速的

if (time == randomNum) {

clearInterval(startTime);

startTime = setInterval(move,20);

}

// 如果奔跑的次数加上随机的阈值的话，那么就将当前的加速的计时器清空，并且重新开启一个每200毫秒的计时器，这个步骤是控制减速的

if (time + randomNum >= MaxNum) {

clearInterval(startTime);

startTime = setInterval(move,200);

}

// 如果奔跑的次数大于等于最大的奔跑次数，那么清空当前计时器，并且计时器等于null，直接返回出去，一次抽奖结束。这个步骤是控制抽奖结束。

if (time >= MaxNum) {

clearInterval(startTime);

startTime = null;

// switch语句判断抽奖结果，这部分比较简单，就不赘述了。

switch(tdList[tdId]) {

case 0:

results.innerText = '今天吃转转乐';