web实例（一）：抽奖

最新推荐文章于 2024-04-08 09:32:05 发布

觅远

最新推荐文章于 2024-04-08 09:32:05 发布

阅读量3.8k

点赞数 1

文章标签： js javascript css

本文链接：https://blog.csdn.net/JBY2020/article/details/118644550

版权


<!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>Document</title>
    <style>
        .box1{
            width: 300px;
            margin: 0 auto;
        }
        button{
            margin: 20px;
            font-size: 20px;
            color: rgb(184, 78, 17);
            background-color: rgb(233, 167, 23);
            border-radius: 5px;
        }
        img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            float: left;
        }
        p{
            color: red;
            font-size: 30px;
            line-height: 80px;
            margin-left: 110px;
        }
        #show-winner{
            width: 290px;
            display: flex;
            flex-wrap: wrap;
            border: rgb(255, 94, 0) solid 2px;
            border-radius: 3px;
        }
        #show-winner>p{
            font-size: 20px;
            line-height: 0;
            color: rgb(255, 94, 0);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div>
            <button class="start">开始抽奖</button>
            <button class="stop" disabled>停止抽奖</button>
        </div>
        <div id="winner"></div>
        <div id="show-winner">
            <p style="color: darkred;font-size: 30px;margin: 30px auto;">中奖名单：</p>
        </div>
    </div>
    <script>
        // 抽奖池
        var user_pool = [ 
            user1 = {
                name:'鲁智深',
                img:'./userimg/鲁智深.jpg'
            },
            user2 = {
                name:'李逵',
                img:'./userimg/李逵.jpg'
            },
            user3 = {
                name:'李忠',
                img:'./userimg/李忠.jpg'
            }];

        var user = user_pool.concat();

        // 获取对象
        var start = document.querySelector('.start');
        var stoprun = document.querySelector('.stop');
        var winner = document.querySelector('#winner');
        var sw = document.querySelector('#show-winner');

        start.onclick = function () { // 点击之后开始随机抽奖
            if (user.length<1){
                    winner.innerHTML = '<p class = "no_one;">抽奖人数不足</p>'
                    stoprun.disabled = "disabled";   // 中奖人员抽完后，需要禁用抽奖按钮，不然会一直添加最后一个中奖的人到中奖名单中
                    start.disabled = "disabled"; 
                }else{
                    t = window.setInterval(function () {
                    var i = Math.floor(Math.random() * user.length); // 随机数取抽奖池里面的下标
                    winner.innerHTML = '<img src="'+user[i].img+'" alt=""><p>'+user[i].name+'</p>'
                    winner_name = '<p class="winner_name;">'+user[i].name+'</p>';
                    winning_user_index = i;
                }, 100);}
            start.disabled = "disabled"; //解决没有点击停止时重复点击开始抽奖按钮,按钮在正在抽奖状态下只能点击一次
            stoprun.disabled = '';    // 取消停止抽奖按钮添加的禁用状态
        };

        stoprun.onclick = function () { // 停止抽奖
            if (user.length<1){
                    winner.innerHTML = '<p class = "no_one;">抽奖人数不足</p>'
                    stoprun.disabled = "disabled";   // 中奖人员抽完后，需要禁用抽奖按钮，不然会一直添加最后一个中奖的人到中奖名单中
                    start.disabled = "disabled"; 
                }else{
                    window.clearInterval(t);  // 清除抽奖的定时器
                    start.disabled = "";    // 取消开始抽奖按钮添加的禁用状态
                    var namelists = sw.querySelector('.winner_name');
                    sw.innerHTML += winner_name;
                    start.disabled = ''; //  修改开始抽奖按钮属性，在停止状态下可点击抽奖
                    stoprun.disabled = "disabled";  // 修改停止抽奖按钮属性，让其在停止状态下禁止点击，否则一直会添加中奖名单
                    user.splice(winning_user_index,1);   // 通过开始抽奖事件中传入的已中奖人员所在抽奖池数组中的下标将已经中奖的人员删除，避免重复抽奖
                        }
        };
    </script>
</body>
</html>

觅远

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
web实例（一）：抽奖

<!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>D..
复制链接

扫一扫