原生JS实现简易转盘抽奖

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

大家好，我是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实现简易转盘抽奖的更多相关文章

原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下 ...
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
js实现游戏转盘抽奖
<!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...
js实现大转盘抽奖游戏实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
原生JS制作简易Tabs组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

随机推荐

Go语言基础之数据类型
Go语言基础之数据类型 Go语言中有丰富的数据类型,除了基本的整型.浮点型.布尔型.字符串外,还有数组.切片.结构体.函数.map.通道(channel)等.Go 语言的基本类型和其他语言大同小异. ...
R 544
F2: 什么dfs根本不会啊,只会瞎贪心... 我们考虑先连哪些边,对于u,v两个点,如果u,v所在的联通块都与1相连的话,那我们肯定先不连这种边吧. 因为太亏了啊... 总而言之我们要在不影响答案的 ...
codeforces 1106 E
显然是dp啊,dp[i][j]表示到时间i打扰了j次的最小收益显然要排序,官方题解说set没看懂,优先队列就行啊. 按照时间排序,显然这样扫的话可以保证当前时间点的点在优先队列里吧, 然后有打断和不 ...
[转]常见的JavaScript内存泄露
什么是内存泄露内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制, ...
ubuntu下安装php扩展
参考原文地址:http://www.php.cn/php-weizijiaocheng-341528.html 发现在mac上好像不太行,然后按照下面的可以,写下来与大家分享利用ubuntu的软件包 ...
DELPHI中完成端口(IOCP)的简单分析(3)
DELPHI中完成端口(IOCP)的简单分析(3) fxh7622关注4人评论7366人阅读2007-01-17 11:18:24 最近太忙,所以没有机会来写IOCP的后续文章.今天好不容易有 ...
ES6 Class 类
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类. class 的本质是 function. 它可以看作一个语法糖,让对象原型的写法更加清晰.更像面向对象编程的语 ...
11.1-uC/OS-III就绪列表
准备好运行的任务被放到就绪列表中, 如图6-1.就绪列表是一个数组( OSRdyList[]),它一共有OS_CFG_PRIO_MAX条记录,记录的数据类型为OS_RDY_LIST(见OS.H).就绪 ...
SpringBoot整合Swagger2
相信各位在公司写API文档数量应该不少,当然如果你还处在自己一个人开发前后台的年代,当我没说,如今为了前后台更好的对接,还是为了以后交接方便,都有要求写API文档. 手写Api文档的几个痛点: 文档需 ...
Python3学习之路~5.9 xml处理模块
xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,以前在json还没诞生的时候,大家只能选择用xml,至今很多传统公司如金融行业的很多系统的接口还主要 ...

原生JS实现简易转盘抽奖

原生JS实现简易转盘抽奖的更多相关文章

随机推荐

热门专题