JS抽奖器（JS基础）

最新推荐文章于 2024-07-31 13:55:09 发布

挺菜的.

最新推荐文章于 2024-07-31 13:55:09 发布

阅读量360

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_55179512/article/details/124384502

版权

js抽奖器考察的是对js基础知识的掌握以及是否能够熟练的运用，代码里注释对每一步的讲解比较详细，跟着代码一点点进行下去就能自己掌握

<!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>js抽奖器</title>
    <style>
        .contain{
            width: 620px;
            height: 620px;
        }
        .contain div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
            border: 1px solid black;
        }
        #start{
            background-color: white;
        }
        .ob span{
            position: relative;
            left: 78px;
            line-height: 200px;
        }
        #start span{
            position: relative;
            left: 78px;
            line-height: 200px;
        }
        #start{
            display: block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="contain">
        <div class="ob"><span>五毛钱</span></div>
        <div class="ob"><span>五分钱</span></div>
        <div class="ob"><span>五块钱</span></div>
        <div class="ob"><span>五十</span></div>
        <div id="start" onclick="st()"><span>开始</span></div>
        <div class="ob"><span>一百</span></div>
        <div class="ob"><span>两百</span></div>
        <div class="ob"><span>五百</span></div>
        <div class="ob"><span>一千</span></div>
    </div>

    <!-- 最后让抽奖器抽到的结果显示的地方 -->
    <span id="s"></span>
    <button id="pay">支付</button>

    <script>
        var strat = document.getElementById("start");
        //html中有八个class为ob的元素，所以获取的就是长度为八的一个数组
        var ob = document.getElementsByClassName("ob");

        var timer = null;
        var num = 0;

        var st = function(){
            //防止出现多个定时器
            if(timer == null){
                timer = setInterval(() => {
                    num++;

                    //循环一遍先将所有的元素都变为原始原色
                    //如果不在下一次循环之前将所有颜色清空则会出现多个被选中的颜色
                    for(let i = 0;i<ob.length;i++){
                        ob[i].style.background = 'aqua';
                    }

                    //随机数并将其作为下标作为被选中的元素更改颜色
                    var res = Math.round(Math.random()*8+0);
                    ob[res].style.background = 'green';
                    
                    //限制循环次数，清空定时器，并将最后结果赋值在结果显示的地方
                    if(num>8){
                        window.clearInterval(timer);
                        timer = null;
                        console.log(ob[res].textContent);
                        var s = document.getElementById("s");
                        s.innerText = ob[res].textContent;
                    }
                }, 1000);
            }
        }
    </script>
</body>
</html>