基于js的抽奖

旧城等待， 2022-05-13 06:14 170阅读 0赞

> 抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！

## 方法一：使用table写一个随机抽奖 ##

这是html+js代码

<!DOCTYPE html>
    <html lang="en">
    
    <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">
        <link rel="stylesheet" href="css/test2.css">
        <title>抽奖</title>
    </head>
    
    <body>
        <div class="content">
            <div class="top">
                抽奖活动
            </div>
            <div class="body">
                <table>
                    <tr>
                        <th>百度</th>
                        <th>腾讯</th>
                        <th>阿里</th>
                        <th>京东</th>
                        <th>华为</th>
                    </tr>
                    <tr>
                        <th>滴滴</th>
                        <th>蚂蚁金服</th>
                        <th>乐视</th>
                        <th>中国电网</th>
                        <th>中石化</th>
                    </tr>
                    <tr>
                        <th>美团</th>
                        <th>乐视</th>
                        <th>小米</th>
                        <th>网易</th>
                        <th>酷我</th>
                    </tr>
                    <tr>
                        <th>爱奇艺</th>
                        <th>盛大</th>
                        <th>短文学</th>
                        <th>浅墨诗韵</th>
                        <th>浪子一秋</th>
                    </tr>
                </table>
            </div>
            <div class="bottom">
                <input type="button" name="" id="button" class="button" value="开始" onclick="toStart(this)">
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var timer;
        var button = document.querySelector("#button");
        function toStart() {
            // 启动定时器
            if (timer == undefined) {
                timer = setInterval(changeStyle, 100);
                button.setAttribute("value", "停止");
            } else {
                clearInterval(timer);
                timer = undefined;
                button.setAttribute("value", "开始");
            }
        }
        // 改变样式
        var a, b;
        function changeStyle() {
            var tb = document.querySelector("table");
            console.log(a);
            if (a != undefined) {
                tb.rows[a].cells[b].style.backgroundColor = "white";
            }
            // 
            // 获取要操作的元素
            a = parseInt(Math.random() * 4);
            b = parseInt(Math.random() * 5);
            // console.log(a);
            var col = tb.rows[a].cells[b];
            col.style.backgroundColor = "red";
        }
    
    
    </script>
    
    </html>

## 方法二：使用span标签写 ##

html+js代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <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">
        <link rel="stylesheet" href="css/test2.css">
        <title>抽奖</title>
    </head>
    
    <body>
        <div class="content">
            <div class="top">
                抽奖活动
            </div>
            <div class="body" id="body">
    
            </div>
            <div class="bottom">
                <input type="button" name="" id="button" class="button" value="开始" onclick="toStart()">
            </div>
        </div>
    </body>
    <script type="text/javascript">
        // 获取要操作的元素
        var div = document.getElementById("body");
        // 动态添加span
        for (var i = 0; i < 25; i++) {
            // 创建一个新的标签
            var el = document.createElement("span");
            // 给标签设置内容
            el.innerText = i;
            // 添加子元素
            div.appendChild(el);
        }
    
        var timer;
        var button = document.querySelector("#button");
        function toStart() {
            // 启动定时器
            if (timer == undefined) {
                timer = setInterval(changeStyle, 100);
                button.setAttribute("value", "停止");
            } else {
                clearInterval(timer);
                timer = undefined;
                button.setAttribute("value", "开始");
            }
        }
        // 改变样式
        var selection;
        function changeStyle() {
            var spans = document.getElementsByTagName("span");
            if (selection != undefined) {
                console.log(selection);
                spans[selection].style.backgroundColor = "white";
            }
            selection = parseInt(Math.random() * 25);
            var spans = document.getElementsByTagName("span");
            var selectSpan = spans[selection];
            selectSpan.style.backgroundColor = "red";
        }
    
    </script>
    
    </html>

两个页面的css代码

*{
        margin: 0;
        padding: 0;
    }
    body{
        display: block;
    }
    .content{
        width: 500px;
        margin: auto;
    }
    .top{
        text-align: center;
        height: 50px;
        color: red;
        font-size: 30px;
    
    }
    table{
        width: 100%;
        border: 1px solid red;
        border-spacing: 0;
    }
    th{
        border: 1px dashed rgb(189, 189, 86);
        height: 40px;
    }
    .bottom{
        height: 50px;
        margin-top: 20px;
        text-align: center;
    }
    .button{
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
    
    
    /* test2-1 */
    .body{
        width: 512px;
        height: 260px;
        border: 1px solid red;
    }
    span{
        display: inline-block;
        width: 100px;
        height: 50px;
        border: 1px dashed #b1da1f;
        line-height: 50px;
        text-align: center;
    }