jquery抽奖功能开发

╰+攻爆jí腚メ 2023-01-01 05:47 178阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03-jquery抽奖功能</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        <style>
            .left{float: left;}
            .right{float: right;}
        </style>
    </head>
    <body>
    <div id="content">
        <div class="left">
            <div class="list">
                <img src="https://qq.yh31.com/tp/zjbq/201711101610232749.gif" alt="">
            </div>
            <div class="button">
                <input type="button" value="开始抽奖" class="startButton">
                <input type="button" value="暂停" class="stopButton">
            </div>
        </div>
        <div class="right">
            <div class="show" style="display: none;">
                <img src="" alt="">
            </div>
        </div>
    </div>
    <script>
        $(function () {
            // 奖品列表
            var list = [
                'https://qq.yh31.com/tp/zjbq/201711101610232749.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610225087.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610212886.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610220465.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610220607.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610227695.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610237959.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610242063.gif',
                'https://qq.yh31.com/tp/zjbq/201711101610242858.gif',
            ];
    
            // 定义一个定时器的变量
            var interval;
    
            // 为开始抽奖按钮绑定单击事件
            $('.startButton').on('click', function () {
                // 置灰当前按钮不可点击
                $(this).prop('disabled', 'false');
    
                // 移除暂停按钮的不可点击属性
                $('.stopButton').removeAttr('disabled');
    
                // 清空.show > img的src
                $('.show > img').prop('src', '');
    
                $('.show').css('display', 'none');
    
                // 从list中随机获取奖品
                interval = setInterval(function () {
                    var number = parseInt(Math.random() * 9);
                    $('#content > .left > .list > img').prop('src', list[number]);
                } ,100);
            });
    
    
            // 为暂停按钮绑定单击事件
            $('.stopButton').on('click', function () {
                // 置灰当前按钮不可点击
                $(this).prop('disabled', 'false');
    
                // 移除开始抽奖按钮的不可点击属性
                $('.startButton').removeAttr('disabled');
    
                // 循环定时器停止
                clearInterval(interval);
    
                // 获取.left > img的图片路径
                var src = $('#content > .left > .list > img').prop('src');
    
                // 将图片路径设置到.right > img
                $('.show > img').prop('src', src);
    
                // 显示.right > img
                $('.show').show(1000);
            });
        });
    
    </script>
    </body>
    </html>