关于javascript:100行前端代码实现九宫格抽奖功能

3次阅读

共计 1592 个字符，预计需要花费 4 分钟才能阅读完成。

话不多说，间接上成果：

次要流程为：

1. 依据效果图，构建动态页面

2. 获取元素 (自带的属性)

3. 绑定事件

4. 事件触发之后

4.1 所有的 li 元素在指定的工夫距离下色彩随机变动

4.2 延时器 2 秒后革除定时器

4.3 在革除定时器之后, 所有的 li 背景色复位, 随机选一个

代码实现过程如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 抽奖 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 240px;
            margin: 30px auto;
            border: 1px solid #ccc;
        }

        ul li {
            width: 60px;
            height: 60px;
            line-height: 30px;
            text-align: center;
            margin: 10px;
            float: left;
            background-color: orange;
            color: white;
        }
        /* 清浮动 */
        ul:after {
            content: "";
            display: block;
            clear: both;
        }

        p {
            margin: 20px auto;
            text-align: center;
        }

        .btn {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: none;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li> 礼品 1 </li>
            <li> 礼品 2 </li>
            <li> 礼品 3 </li>
            <li> 礼品 4 </li>
            <li> 礼品 5 </li>
            <li> 礼品 6 </li>
            <li> 礼品 7 </li>
            <li> 礼品 8 </li>
            <li> 礼品 9 </li>
        </ul>
        <p><button onclick="alert(123)" title="按钮"> 开始抽奖 </button></p>

    </div>

</body>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.className = "btn";
    // 通过标签名 获取元素
    var lis = document.getElementsByTagName("li"); 
    // 为元素绑定单击事件
    btn.onclick = function () {
        // 禁用按钮
        btn.disabled = true;
        var timer = setInterval(function () {for (var i = 0; i < lis.length; i++) {lis[i].style.backgroundColor = getColor();}
        }, 100);
        // 应用延时器 革除定时器
        setTimeout(function (){clearInterval(timer)
            for (var i = 0; i < lis.length; i++) {lis[i].style.backgroundColor = "orange"
            }
            var index = Math.floor(Math.random() * lis.length )
            lis[index].style.backgroundColor = "red";
            // 启用按钮
            btn.disabled = false;
            
        }, 2000)
    }
    // 随机色彩的函数
    function getColor() {return "#" + Math.random().toString(16).substr(2, 6);
    }

</script>
</html>

正文完