24、JQuery案例（抽奖）

最新推荐文章于 2022-05-04 00:00:00 发布

l0510402015

最新推荐文章于 2022-05-04 00:00:00 发布

阅读量1.2k

点赞数 2

分类专栏： 12_JQuery

本文链接：https://blog.csdn.net/l0510402015/article/details/106105048

版权

需求：
    1、点击“点击开始”按钮，小图片位置开始周期随机显示小图标；
    2、点击“点击停止”按钮，小图片位置停止随机显示，并将当前小图片在大图片位置进行显示。
    3、未抽奖是“点击开始”按钮有效，“点击停止”按钮灰色显示失效。当正在抽奖时则反之。
分析：
    1. 给开始按钮绑定单击事件
        1.1 定义循环定时器
        1.2 切换小相框的src属性
            * 定义数组，存放图片资源路径
            * 生成随机数。数组索引

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

<!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>

        var imgs = [//用于存放图片的数组
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];

        //设置两个按键的被点击功能是否有效
        function setRuning( isRun) {
            if(isRun == true){
                $("#startID").prop("disabled", true);
                $("#stopID").prop("disabled", false);
            }else{
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);

最低0.47元/天解锁文章

l0510402015

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
24、JQuery案例（抽奖）

需求：1、点击“点击开始”按钮，小图片位置开始周期随机显示小图标；2、点击“点击停止”按钮，小图片位置停止随机显示，并将当前小图片在大图片位置进行显示。3、未抽奖是“点击开始”按钮有效，“点击停止”按钮灰色显示失效。当正在抽奖时则反之。分析：1.给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性*定义数组，存放图片资源路径*生成随机数。数组索引...
复制链接

扫一扫