JQuery制作一个随机点名、抽奖的小程序_jquery 随机抽签插件-优快云博客

本文链接：https://blog.youkuaiyun.com/RookiexiaoMu_a/article/details/89439797

本文介绍了一个基于JQuery的抽奖程序设计与实现过程。通过切换按钮状态和图片资源，实现抽奖效果。文章详细展示了HTML、CSS和JavaScript代码，用于创建抽奖界面，包括小图片轮播和大图片显示中奖结果。

首先先看一下效果：

起初，“点击开始”启用，“点击停止”按钮禁用；
点击：“点击开始”按钮后，“点击开始”按钮被禁用，“点击停止”按钮启用，左上角图片开始切换；
点击：“点击停止”按钮后，“点击开始”启用，“点击停止”按钮禁用；同时左上角图片停止切换，右边的大图片显示出左上角的图片。
在这里插入图片描述

注：使用此程序需要导入JQuery框架

#### 网页代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <style type="text/css">
        #small {
            border: 1px solid blueviolet;
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
        }

        #smallPhoto {
            width: 75px;
            height: 75px;
        }

        #big {
            border: 2px solid orangered;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 300px;
            top: 10px
        }

        #bigPhoto {
            width: 500px;
            height: 500px;
        }

        #btnStart {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }

        #btnStop {
            width: 100px;
            height: 100px;
            font-size: 22px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="img/man00.jpg"/>
</div>

<!-- 大像框 -->
<div id="big">
    <img id="bigPhoto" src="img/man00.jpg"/>
</div>

<!-- 开始按钮 -->
<input id="btnStart" type="button" value="点击开始">

<!-- 停止按钮 -->
<input id="btnStop" type="button" value="点击停止" disabled="disabled">


<script 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  num = 0;

    var timer;//计时器
    // 开始按钮
    $("#btnStart").click(function () {
    	//1. 点开始按钮，切换2个按钮的状态，一个可用，一个不可用
        $(this).prop("disabled",true);//不可用
        $("#btnStop").prop("disabled",false);//可用
        //2. 不停的修改smallPhoto的src
        //参数1：被调用的函数  参数2：过多久，毫秒。返回值就是计时器
        timer = setInterval(function () {
        	//小图片
            $("#smallPhoto").attr("src",imgs[num]);
            num++;
            //判断如果num = 数组的长度，设置num=0
            if (num == imgs.length) {
                num = 0;
            }
        },100);
    });

    // 停止按钮
    $("#btnStop").click(function () {
    	//1. 切换按钮的状态
        $("#btnStart").attr("disabled",false);
        $("#btnStop").attr("disabled",true);

        // 图片停止转换   清除计时器
        clearInterval(timer);
        // 将小图片 src 的地址赋值给大图片
        $("#bigPhoto").attr("src",$("#smallPhoto").attr("src"));
        // 使用动画
        $("#bigPhoto").hide();  //隐藏
        // 淡出
        $("#bigPhoto").fadeIn(3000);    // 时间
    });

</script>

</body>
</html>