JQuery实现随机抽奖

持久的棒棒君

已于 2022-12-05 16:23:59 修改

阅读量963

点赞数

分类专栏：大杂烩文章标签： javascript jquery

于 2022-05-04 00:00:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/124517366

版权

大杂烩专栏收录该内容

259 篇文章 3 订阅

订阅专栏

效果演示

请添加图片描述

具体实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            //3、处理按钮点击前和点击后是否可用
            $("#start").prop("disabled", false);
            $("#end").prop("disabled", true);


            // 1、给开始按钮绑定单击事件
                // 1.1 定义循环计时器
                // 1.2 切换小相框的src属性
                    // * 定义一个数组，存储图片资源路径
                    // * 生成随机数，数组角标

            var imgs = ["./image/test1.jpg",
                "./image/test2.jpg",
                "./image/test3.jpg"
            ];
            var id; //接收定时器返回的id值
            var index; //数组索引
            $("#start").click(function () {
                id = setInterval(function () {
                    //生成随机角标
                    index = Math.floor(Math.random() * 4);
                    /*
                    Math.floor()方法向下取整
                    Math.random()方法可以获取0.0到3.999...的任意值
                    */
                    //获取相框的src属性
                    $("#img1").prop("src", imgs[index]);

                    //处理按钮是否可用
                    $("#start").prop("disabled", true);
                    $("#end").prop("disabled", false);

                }, 20);
            })

            // 2、给结束按钮绑定单击事件
            // 2.1 停止计时器
            // 2.2 给大相框设置src属性

            $("#end").click(function () {
                clearInterval(id);
                $("#img2").prop("src", imgs[index]);
                //处理按钮是否可用
                $("#start").prop("disabled", false);
                $("#end").prop("disabled", true);
            });
        })
    </script>
</head>

<body>
    <!-- 小相框 -->
    <div style="border-style: dotted;width: 90px;height: 150px;">
        <img id="img1" src="./image/test1.jpg" style="width: 90px;height: 150px;">
    </div>
    <!-- 大相框 -->
    <div style="border-style:double; width:270px; height:450px">
        <img id="img2" src="./image/test1.jpg" style="width:270px; height:450px">
    </div>

    <!-- 开始按钮 -->
    <input id="start" type="button" value="点击开始" style="width: 150px;height: 100px;font-size: 30px;">
    <!-- 停止按钮 -->
    <input id="end" type="button" value="点击暂停" style="width: 150px;height: 100px;font-size: 30px;">
</body>

</html>

持久的棒棒君

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现随机抽奖

效果演示具体实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫