console 命令行工具 X clear

console

<html>
<head>
    <meta charset="utf-8">
    <title>抽奖</title>
    <!-- <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet"> -->
    <!-- <link href="style.css" rel="stylesheet"> -->
</head>    
<body>
    
    <ul>
        <li>
            <div class="cover">刮开有奖</div>
            <div class="prize">谢谢参与</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>
        <li>
	        <div class="cover">刮刮乐</div>
	        <div class="prize">再来一瓶</div>
        </li>

    </ul>
<script>
    $(function(){
        //奖池刷新
        // let=coverArr=["来嘛~"];
        let prizeArr=["1个葫芦娃","2个葫芦娃","3个葫芦娃","4个葫芦娃","5个葫芦娃","6个葫芦娃","7个葫芦娃","8个葫芦娃","9个葫芦娃"];
        console.log("奖品池："+prizeArr);
        
        $('.prize').each(function(i){
            let len=prizeArr.length;
            // console.log(len);
            let rand=Math.floor(Math.random()*len);
            // console.log(rand);
            // console.log(prizeArr[rand]);
            $(this).text(prizeArr[rand]);
            prizeArr.splice(rand,1);
            // console.log(prizeArr);
            // console.log('---------------');
        })

        //刮刮乐
        $('.cover').text("刮刮乐");
        $('.cover').bind('click',function(){
            $(this).hide();
        })
    });
   
</script>
</body>
</html>

*{margin:0;padding:0;}

li { list-style: none; }

ul{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    margin: 0 auto;
    width: 70%;
    background: #eee;
}
li{
    display: inline-block;
    position: relative;
    margin:20px;
    /* padding: 20px; */
    width: 150px;
    height: 150px;
}
li .cover{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 150px;
    /* width: 100%; */
    /* height: 100%; */
    background:#ADD;
    z-index: 999;
}
li .prize{
    position: absolute;
    /* top: 0; */
    /* left: 0; */
    /* bottom: 0; */
    /* right: 0; */
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 150px;
    background: red;
    color: #FFF;


}

本项目引用的自定义外部资源

jquery.js