JavaScript九宫格抽奖

时间:2022-05-23 APICloud 人气:0

效果图

话不多说，直接上效果：

实现流程

主要流程为：

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>

加载全部内容