抽奖功能

1. 主要需求

实现一个抽奖功能。
点击开始按钮后，开始按钮禁用，停止按钮取消禁用，小图片实现快速切换显示。
点击停止按钮后，停止按钮禁用，开始按钮取消禁用，小图片停止切换，将小图片在大图片位置显示。
小图片实现快速切换显示。
点击停止按钮后，淡入淡出选中图。

2. 素材页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    
    <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> 
</head>

<body>
<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="../img/man00.png"/>
</div>

<!-- 大像框 -->
<div id="big">
    <img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
    
<script type="text/javascript">
   
</script>
</body>
</html>

3. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

    <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>
</head>
<body>

<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="../img/man00.jpg"/>
</div>

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

<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">

<script type="text/javascript">

    //初始化抽奖的名单（图片地址）
    let imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg",
    ];

    //定时器序号
    let counter = null;

    //点击开始
    function gameStart() {
        //开始按钮禁用
        $("#btnStart").prop("disabled",true);
        //停止按钮可用
        $("#btnStop").prop("disabled",false);

        //定义计数变量
        let num = 0;

        //使用定时器实现小图框快速切换图片
        counter = setInterval(function () {
            //通过取余，循环得到数组得到索引
            let index = num%imgs.length;
            //修改小图框中img的src即可
            $("#smallPhoto").attr("src",imgs[index]);
            //计数变量自增
            num++;
        },20);
    }
    
    //点击结束
    function gameOver() {
        //禁用结束按钮
        $("#btnStop").prop("disabled",true);
        //取消开始按钮的禁用
        $("#btnStart").prop("disabled",false);

        //停止小图框的抽奖(停止定时器)
        clearInterval(counter);
        //将计算变量重置为0
        num = 0;

        //获取小图框图片地址
        let imgUrl = $("#smallPhoto").attr("src");

        //将抽奖结果显示在大图框中，并隐藏起来
        $("#bigPhoto").attr("src",imgUrl).hide();

        //将图片进行淡出
        $("#bigPhoto").fadeIn(2000);
    }

</script>
</body>
</html>

示例素材：

原文链接：https://qwert.blog.csdn.net/article/details/105453318

Regino

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

私信关注

[JavaScript] 用 jQuery 实现抽奖程序

目录

抽奖功能

1. 主要需求

2. 素材页面

3. 代码实现

猜你喜欢