jquery抽奖功能开发

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值