jquery案例实现抽奖效果

案例效果：

20200116.gif

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <script src="js/jquery-3.2.1.js"></script>

    <script>
    /*
        分析：
            1.给开始按钮绑定单击事件
                1.1 定义循环定时器
                1.2 切换小相框的src属性
                    * 定义数组，存放图片资源路径
                    * 生成随机数。数组索引

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

        var imgs = ["./img/01.jpg",
                    "./img/02.jpg",
                    "./img/03.jpg",
                    "./img/04.jpg"
                    ]

        var startId;  //开始定时器的id
        var index;    // 随机角标

        $(function(){
            // 处理按钮是否可以使用的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);

            // 1.给开始按钮绑定单击事件
            $("#startID").click(function(){
                // 处理按钮是否可以使用的效果
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);

                // 1.1 定义循环定时器 20毫秒执行一次
                startId = setInterval(function(){
                    // 1.2生成随机角标 1-4
                    index = Math.floor(Math.random() * 3)+1;
                    // 1.3设置小相框的src属性
                    $("#img1ID").prop("src",imgs[index])
                }, 20);
            });

            // 2.给结束按钮绑定单击事件
            $("#stopID").click(function(){
                // 处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                // 1.1 停止定时器
                clearInterval(startId);
                // 1.2 给大相框设置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/01.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/01.jpg" style="width:800px;height:500px;" />
    </div>
        
    <!-- 开始按钮 -->
    <input type="button" id="startID" value="点击开始" style="width: 150px;height: 150px;font-size: 22px;">
    <!-- 停止按钮 -->
    <input type="button" id="stopID" value="点击停止" style="width: 150px;height: 150px;font-size: 22px;">
</body>
</html>

ps：如需使用代码，注意代码中的资源导入与路径问题

如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，大家也可以分享给需要的人。

如需转载，请注明出处。https://www.jianshu.com/p/9bd527c54b8a

最后编辑于：2020.01.16 12:10:25