抽奖案例

20190105220704.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
h3{ text-align:center; margin:100px auto 20px}
#box{ width:500px; margin:0 auto; border:1px solid #ccc; padding:20px}
#box .cont{ height:120px; padding:20px}
#box .cont p{ margin-bottom:20px}
.cont p span{margin: 0 4px;}
#box p{text-align:center;margin-bottom:20px}
#box button{ height:40px; width:100px; margin:5px}
.big{ font-size:30px; color: red;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>

</head>

<body>
<h3>幸运大抽奖</h3>
<div id="box">
    <div class="cont">
    </div>
    <p>
        <button type="button">三等奖5人</button>
        <button type="button" disabled>二等奖3人</button>
        <button type="button" disabled>一等奖1人</button>
    </p>
</div>
</body>
</html>

<script>
    var arr = ["小橘子", "laojiang","杜某某", "李某某", "贾某某", "齐某某", "潘某某", "赵某某", "高某某", "雷某某", "王某某", "李某某", "李某某", "杨某某", "杨某某", "张某某", "蔡某某", "刘某某", "樊某某"]
    $('button').eq(0).click(function() {
        $(this).prop('disabled',true);
        run('三',5,function(){
            $('button').eq(1).prop('disabled',false);        //disabled控制抽奖进行中再次点击。
        })
    })
    $('button').eq(1).click(function() {
        $(this).prop('disabled',true);
        run('二',3,function(){
            $('button').eq(2).prop('disabled',false);
        })
    })
    $('button').eq(2).click(function() {
        $(this).prop('disabled',true);
        run('一',1)
    })
    function run(level,count,fn) {        //level等奖    count位    fn函数调用
        var num = 0;                    //记录抽奖的个数
        var $p = $('<p>');                //创建一个p标记,用于存放中奖同学
        $p.html('获得'+level+'等奖的'+count+'位同学是:').appendTo('.cont');    //创建的p标签和内容添加到类名为cont的div中去
        var timer = setInterval(function() {
            num++;
            var randNum = parseInt( Math.random()*arr.length);
            var $span = $('<span>')
            $span.html(arr.splice(randNum,1)).appendTo($p);
            if(count === 1){
                $span.addClass('big')
            }
            if(num ===count){
                clearInterval(timer);
                fn&&fn()
            }
        },500)
    }
</script>

完结

老江程序生涯

知识的搬运工,技术成就梦想。

知识的海洋很辽阔,永远也不要自我膨胀。

越努力越幸运

每天记录一点点。

标签: jQuery案例

添加新评论