国产肉体XXXX裸体137大胆,国产成人久久精品流白浆,国产乱子伦视频在线观看,无码中文字幕免费一区二区三区 国产成人手机在线-午夜国产精品无套-swag国产精品-国产毛片久久国产

博客專欄

EEPW首頁 > 博客 > 原生JS實(shí)現(xiàn)簡易轉(zhuǎn)盤抽獎

原生JS實(shí)現(xiàn)簡易轉(zhuǎn)盤抽獎

發(fā)布人:lantu 時(shí)間:2020-06-28 來源:工程師 發(fā)布文章

<!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)文章:逆變器工作原理




關(guān)鍵詞: js

相關(guān)推薦

技術(shù)專區(qū)

關(guān)閉