小墨の博客

梦想需要付诸行动,否则只能是梦

Jquery公平抽奖系统

点击代码右上角查看演示。

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        .box {
            width: 300px;
            height: 330px;
            border: 5px solid #c9c9c9;
            margin: 10px auto;
        }
        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: red;
            color: #fff;
            text-align: center;
            font-weight: bold;
        }
        .content {
            width: 300px;
            height: 300px;
        }
        span {
            position: relative;
            display: inline-block;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            color: #666;
            border: 1px solid #c9c9c9;
            border-radius: 5px;
        }
        span:nth-of-type(1) {
            top:5px;
            left: 8px;
        }
        span:nth-of-type(2) {
            top:5px;
            left: 8px;
        }
        span:nth-of-type(3) {
            top:5px;
            left: 8px;
        }
        span:nth-of-type(4) {
            top:11px;
            left: 201px;
        }
        span:nth-of-type(5) {
            top:110px;
            left: 105px;
        }
        span:nth-of-type(6) {
            top:110px;
            right: 90px;
        }
        span:nth-of-type(7) {
            top:18px;
            left: 7px;
        }
        span:nth-of-type(8) {
            bottom: 81px;
            right: 88px;
        }
        button {
            position: relative;
            bottom:82px;
            right:82px;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: red;
            border: none;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
            border-radius: 50%;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="title">公平抽奖系统</div>
            <div class="concent">
                <span>一等奖</span>
                <span>二等奖</span>
                <span>三等奖</span>
                <span>四等奖</span>
                <span>五等奖</span>
                <span>幸运奖</span>
                <span>鼓励奖</span>
                <span>谢谢参与</span>
                <button>点击抽奖</button>
            </div>
        </div>
        <script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(function () {
            var arr = ["#c9c9c9", "#CD6600", "#2E8B57", "#009ACD", "yellow", "#FF00FF", "pink", "skyblue", "#8B3626"];
            $("button").click(function () {
                var time = setInterval(function () {
                    var n = Math.floor(Math.random() * 8 + 1);
                    $("span").eq(n - 1).css("background", arr[n]).siblings().css("background", "");
                }, 200);
                setTimeout(function () {
                    clearInterval(time);
                    setTimeout(function () {
                        alert($("span[style*=background]").html());
                    }, 100);
                }, 3000);
            });
        });
        </script>
    </body>
</html>

参考:https://yaw.ee/1343.html

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:503
    • 页面总数:20
    • 分类总数:92
    • 标签总数:207
    • 评论总数:58
    • 浏览总数:211726

    | | |
    | |  Z-Blog PHP