jquery抽奖功能开发

最新推荐文章于 2023-09-19 14:16:11 发布

程序员小宁

最新推荐文章于 2023-09-19 14:16:11 发布

阅读量117

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_33088807/article/details/112023713

版权

<!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>