码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现简易转盘抽奖

时间:2019-03-26 13:37:40      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:interval   sky   border   取值   time   frame   abs   relative   case   

我爱撸码,撸码使我感到快乐。

大家好,我是Counter。

本章带大家来简单的了解下原生JS实现转盘抽奖。

因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要,

因此,没有过多的阐述HTML与CSS,而JS基本每行都有注释,但这里CSS

也是起到了至关重要的一步,那就是控制背景色,以及结果的显示与隐藏,效果先给出,如下:

代码给出:

<!DOCTYPE html>
<html lang="zh">
<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;
    }
    /* 设置标识样式 */
    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 class="wrapper">
        <table>
            <tr>
                <td class="active"></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 class="results">今天吃火锅</div>
    </div>
   <!-- <script src="js/index.js"></script> -->
   <!-- js -->
   <script>
    // 获取开始元素
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 = 今天吃转转乐;
                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>

 

原生JS实现简易转盘抽奖

标签:interval   sky   border   取值   time   frame   abs   relative   case   

原文地址:https://www.cnblogs.com/Counterrr/p/10599291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!