怎么用js實現(xiàn)簡單的抽獎系統(tǒng)

發(fā)布時間：2022-03-09 13:51:50 來源：億速云閱讀：141 作者：iii 欄目：開發(fā)技術(shù)

今天小編給大家分享一下怎么用js實現(xiàn)簡單的抽獎系統(tǒng)的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

效果圖如圖所示：字節(jié)帶閃動，點擊開始，可進行抽獎，并且按鈕變?yōu)榻Y(jié)束按鈕，然后點擊結(jié)束按鈕，可以結(jié)束，并抽獎成功。

代碼如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>抽獎</title>
        <style type="text/css">
            table {
                width: 400px;
                height: 400px;
                border: gray solid 1px;
                border-collapse: collapse;
                text-align: center;
                margin: 0 auto;
                margin-top: 100px;
            }
            
            .td {
                border: gray solid 1px;
                background-color: lightskyblue;
            }
            
            .td1 {
                border: gray solid 1px;
                background-color: red;
            }
            
            td:hover {
                background-color: cornflowerblue;
            }
            
            div {
                width: 100px;
                height: 40px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
            }
            
            #btn {
                width: 100px;
                height: 40px;
            }
            #blink{
                width: 300px;
                height: 90px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                font-size: 70px;
                font: "微軟雅黑";
                text-align: center;
                font-weight: bold;
            }
            
        </style>
    </head>

    <body>
        <div id="blink">
            抽  獎 了
        </div>
        <table>
        </table>
        <div>
            <input type="button" id="btn" value="開始" onclick="click1()" />
        </div>

    </body>
    <script type="text/javascript">
        /*利用二維數(shù)據(jù)+dom操作*/
        var interval = 0;
        var table = document.querySelector("table");
        var arr = [
            [1, 2, 3, 4, 5],
            [6, 7, 8, 9, 10],
            [11, 12, 13, 14, 15],
            [16, 17, 18, 19, 20],
            [21, 22, 23, 24, 25]
        ]
        for(var i in arr) {
            var tr = table.insertRow();
            for(var j in arr[i]) {
                var td = tr.insertCell();
                td.setAttribute("class", "td");
                td.innerHTML = arr[i][j];
            }
        }
        //獲取所有的td標(biāo)簽數(shù)組
        var count = document.querySelectorAll("td");

        function click1() {
            //找到當(dāng)前按鈕
            var btn = document.querySelector("#btn");
            //判斷按鈕狀態(tài)
            if(btn.value == '開始') {
                //點解后修改背景顏色
                btn.style.backgroundColor = "red";
                //修改按鈕文字
                btn.value = "結(jié)束";
                //停止繼續(xù)調(diào)用setInterval函數(shù)進行抽獎
                clearInterval(interval);
                interval = setInterval(function() {
                    var rad = Math.floor(Math.random() * 25);
                    for(var i = 0; i < count.length; i++) {
                        //通過遍歷來重新給表設(shè)置樣式
                        count[i].setAttribute("class", "td");
                        if(rad === i) {
                            //給抽到的人改變樣式
                            count[i].setAttribute('class', 'td1');
                        }
                    }
                }, 100)

            } else {
                //設(shè)置背景顏色
                btn.style.backgroundColor = "gainsboro";
                //修改按鈕文字
                btn.value = "開始";
                clearInterval(interval);
            }
        }

        function changeColor() {
            var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
            color = color.split("|");
            document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
        }
        setInterval("changeColor()", 200);
    </script>

</html>

以上就是“怎么用js實現(xiàn)簡單的抽獎系統(tǒng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么用js實現(xiàn)簡單的抽獎系統(tǒng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽