【JavaWeb】JQuery实现抽奖的动画效果功能

╰+攻爆jí腚メ 2023-03-02 05:25 16阅读 0赞

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能

**代码如下：**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jquery案例之抽奖</title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
        <script language='javascript' type='text/javascript'>
    
            /* 分析： 1. 给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组，存放图片资源路径 * 生成随机数。数组索引 2. 给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 */
            var imgs = ["../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg",
            ];
    
            var starId;
            var index;
            $(function () { 
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
    
    
                //1、给开始按钮绑定单击事件
                $("#startID").click(function () { 
                    //1.1定义循环定时器 20毫秒执行一次
                    starId = setInterval(function () { 
    
                        //处理按钮是否可以使用的效果
                        $("#startID").prop("disabled",true);
                        $("#stopID").prop("disabled",false);
    
                        //1.2生成随机角标0-6
                        //0.000--0.999 --> * 7 --> 0.0-----6.9999
                        index = Math.floor(Math.random() * 7);
    
                        //1.3设置小相框的src属性
                        $("#img1ID").prop("src",imgs[index]);
    
                    },20);
                });
    
                //2、给结束按钮绑定单击事件
                $("#stopID").click(function () { 
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);
    
    
                    //1.1 停止定时器
                    clearInterval(starId);
                    //1.2 给大相框设置src属性
                    $("#img2ID").prop("src",imgs[index]).hide();
                    //1.3 显示一秒后
                    $("#img2ID").show(1000);
                });
            });
    
        </script>
    
    </head>
    <body>
    
    
    <div style="border-style:dotted;width:160px;height:100px">
        <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
    </div>
    
    
    <div
            style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
        <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
    </div>
    
    
    <input
            id="startID"
            type="button"
            value="点击开始"
            style="width:150px;height:150px;font-size:22px">
    
    
    <input
            id="stopID"
            type="button"
            value="点击停止"
            style="width:150px;height:150px;font-size:22px">
    
    </body>
    </html>

**目录结构：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70]

**运行结果：**

*  没开始抽奖前：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 1]
 *  点击开始抽奖后，小框框开始快速运转，这里看不出效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 2]
 *  点击停止按钮后，大方框显示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 3]

由于是动画效果，所以图片可能看不太出效果，那么就靠你想象了！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70]: /images/20230208/1d7ef084126c453ab70a45dde9b403ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 1]: /images/20230208/7abfe3b1d357498eb5ee2d024e4ce988.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 2]: /images/20230208/0f1ecc3b677a4ad191ac640809f51dd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2ODg5OA_size_16_color_FFFFFF_t_70 3]: /images/20230208/145a071b829e44b78da5d5638dc28ea6.png