新闻  |   论坛  |   博客  |   在线研讨会
原生JS实现简易转盘抽奖
lantu | 2020-06-28 11:45:25    阅读:418   发布文章

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

    }

    /* 设置标识样式 */

    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>

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

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>

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

*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。

参与讨论
登录后参与讨论
来吧!这里永远都充满阳光!
推荐文章
最近访客