jQuery抽奖小程序的实现

大闸蟹~

于 2022-03-24 14:03:56 发布

阅读量171

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/YCHH1/article/details/123709508

版权

JavaScript 抽奖程序随机数图片切换 DOM操作

关键词由CSDN通过智能技术生成

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .con {
            width: 200px;
            height: 130px;
            text-align: center;
            background-color: burlywood;
            border: 1px solid #000;
            margin: 50px;
            font-size: 12px;
        }

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
        }

        button {
            margin-top: 10px;
            padding: 4px;

            cursor: pointer;
        }

        .hid {
            display: none;
        }
    </style>
</head>

<body>

    <div class="con">
        <img src="./images/9.ico" alt="" class="img">
        <br>

        <span class="text">小明</span>
        <div>
            <button class="start">开始抽奖</button>
            <button class="stop hid">结束抽奖</button>
        </div>
    </div>


    <script src="./js/jquery-3.5.0.js"></script>

    <script>
        var arr = ["小明", "小白", "小花", "小黄", "小亮", "小王"];
        var img = ["./images/9.ico", "./images/10.ico", "./images/11.ico", "./images/12.ico", "./images/13.ico", "./images/14.ico"];

        var timer = null;

        $(".start").click(function () {
            $(".stop").removeClass("hid").siblings().addClass("hid")

            timer = setInterval(function () {
                var rands = parseInt(Math.random() * img.length);
                $(".img").prop("src", img[rands]);
                $(".text").html(arr[rands])
            }, 10)
        })

        $(".stop").click(function () {
            $(".start").removeClass("hid").siblings().addClass("hid");

            clearInterval(timer);
        })
    </script>

</body>

效果图

在这里插入图片描述

大闸蟹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery抽奖小程序的实现

<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> <style>
复制链接

扫一扫