原生js做抽奖效果_js抽奖刷新效果-CSDN博客

本文链接：https://blog.csdn.net/rong0914/article/details/82495273
<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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .box {
            width: 492px;
            height: 4px;
            border-radius: 10px;
            margin: 50px auto;
        }
        li {
            float: left;
            width: 160px;
            height: 160px;
            box-sizing: border-box;
            border-radius: 10px;
            border: 1px solid #000;
            margin-left: 4px;
            margin-top: 4px;
            font-size: 40px;
            padding: 20px;
            text-align: center;
            line-height: 60px;
            box-shadow: 4px 4px 8px 0px #ccc inset,-4px -4px 8px 0px #ccc inset;
        }

        #btn {
            cursor: pointer;
            background-color: gold;
            color:#fff;
        }

        .msg {
            width: 400px;
            height:100px;
            border: 10px solid gold;
            position: fixed;
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -55px;
            margin-left: -205px;
            background-color: #fff;
            font-size: 88px;
            text-align: center;
            line-height: 100px;
            color: gold;
            text-shadow: 0 0 10px #f00;
            animation: txt 1s linear infinite;
        }

        @keyframes txt{
            0%,100%{
                text-shadow: 0px 0px 4px #f00;
            }
            50% {
                text-shadow: 0px 0px 12px #f0f;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item">一等奖</li>
            <li class="item">二等奖</li>
            <li class="item">三等奖</li>
            <li class="item">四等奖</li>
            <li id="btn">开始抽奖</li>
            <li class="item">五等奖</li>
            <li class="item">六等奖</li>
            <li class="item">七等奖</li>
            <li class="item">谢谢惠顾</li>
        </ul>
    </div>
    <div class="msg">特等奖</div>
</body>
</html>
<script>
    /* 需求模板：当__中奖提示框__被__点击__时，效果是__中奖提示框要隐藏__ */
    var msg = document.querySelectorAll('.msg')[0];
    // 当__中奖提示框__被__点击__时
    msg.onclick = function () {
        console.log(msg === this);
        // 中奖提示框要隐藏
        this.style.display = 'none';
    };

    /* 需求模板：当__开始抽奖__被__点击__时，效果是__抽奖效果__ */
    // 1.0 查找元素
    var btn = document.getElementById('btn');
    // 我们要控制 item 的样式，让他变色，所以要提前查找 item
    var items = document.querySelectorAll('.item');
    console.log( items );
    // 结合图解得到的顺序
    var itemsNew = [items[0],items[1],items[2],items[4],items[7],items[6],items[5],items[3]];
    console.log(itemsNew);
    // 3.0.1 创建一个变量，用于记录当前要控制的 item 列表的索引值
    var current = -1;

    function choujiang() {

        // 7.0.1 防止用户重复快速点击，点击事件触发的时候，把事件暂时移除
        btn.onclick = null;

        // 6.0 每次点击，应该要生成随机次数
        // 6.0.1 创建一个变量，用于记录抽奖运行的次数
        var cishu = 10 + parseInt(Math.random() * 20);

        // 3.0 item 的颜色并不是一瞬间，而是某个时间间隔颜色换一次，所以启动间隔定时器
        var timerName = setInterval(function () {
            // 3.0.2 用于记录列表索引的数据累加
            current++;
            // 3.0.3 current 需要约束取值范围 0 ~ items.length - 1
            //       如果 current 超出索引值范围，重设为 0
            if( current > itemsNew.length - 1 ){
                current = 0;
            }
            console.log( current );   // 控制台打印输出数据，取值范围 0 ~ 7
            // 4.0 填充颜色前要排他，清除所有的颜色
            //  5.0 itemsNew 在上面重新排列节点顺序
            for(var i=0; i< itemsNew.length; i++ ){
                // 4.0.1 循环遍历内部
                itemsNew[i].style.backgroundColor = '';
            }
            // 4.0.2 选中第几个填充颜色
            // 5.0.2 设置 itemsNew 数组节点的样式
            itemsNew[current].style.backgroundColor = '#ff9d1b';

            // 6.0.2 每次运动，次数就应该要减少1
            cishu--;
            // 6.0.3 如果次数为0，抽奖要结束了
            if(cishu==0){
                // 6.0.4 清除定时器，抽奖结束
                clearInterval(timerName);
                // 6.0.5 把抽到奖励的文字，替换到 msg 中奖提示框中
                msg.innerText = itemsNew[current].innerText;
                // 6.0.6 显示提示框
                msg.style.display = 'block';
                // 7.0.2 抽奖结束后，重新注册事件
                btn.onclick = choujiang;
            }

        },100);
    }

    // 2.0 给点击按钮绑定事件
    // 7.0 把抽奖函数封装起来
    btn.onclick = choujiang;

</script>