使用jquery实现抽奖的页面

柔情只为你懂 2022-01-29 00:23 220阅读 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'>
            //准备一个一维数组，装用户的像片路径
            var imgs = [
                "../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg"
            ];
            var startId;//开始定时器的id
            var index;//随机角标
            $(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
    
                //给开始按钮绑定单机事件
                $("#startID").click(function () {
                    //定义循环定时器，20毫秒执行一次
                    startId=setInterval(function () {
                        $("#startID").prop("disabled",true);
                        $("#stopID").prop("disabled",false);
    
                        //生成随机角标0-6
                        index=Math.floor(Math.random()*7);//0.000-0.999-->*7-->0.0-6.999-->向下取整-->0-6
                        //设置小相框的src属性
                        $("#img1ID").prop("src",imgs[index]);
                    },20);
                });
    
    
                //给结束按钮绑定单击事件
                $("#stopID").click(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);
    
                    //停止定时器
                    clearInterval(startId);
                    //给大相框src设置属性,先隐藏
                    $("#img2ID").prop("src",imgs[index]).hide();
                    //然后1秒漂亮显示
                    $("#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>

## 使用的图片 ##

man00.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70]man01.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 1]man02.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 2]man03.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 3]man04.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 4]man05.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 5]man06.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 6]

## 最终效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70]: /images/20220129/30b862efacaa4f8f8d8b64839b65fd6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 1]: /images/20220129/402c53f8942d4373be769818e237c540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 2]: /images/20220129/39bd5bbef4d945c7b5f79d3bcee691f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 3]: /images/20220129/56565dcb3b4e4cda8011355a37c0b5e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 4]: /images/20220129/4beee1f1b6c34f358074125cac9570e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 5]: /images/20220129/7ef4de48fede4164afa4dfe2855e9e46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 6]: /images/20220129/ddb9888b5aef46f18430c4d23f4c9d7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5ncnVpbHo_size_16_color_FFFFFF_t_70 7]: /images/20220129/79eb3ae4482a4a8ebfc3e3f0e12400c9.png