JS 抽奖机 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            .box{
                width: 300px;
                margin: 100px auto;
            }
            .up{
            }
            .up div,.center div,.button div{
                box-sizing: border-box;
                border: 1px solid red;
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                float: left;
            }
            .start{
                cursor: pointer;
                background-color: #FF6600;
                color: white;
            }
            ul{
                width: 300px;
                height: 300px;
                border: 1px solid red;
            }
            li{
                width: 80px;
                height: 80px;
                
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="box">
            <h2 align="center">嘉靖翻牌子</h2>
            <div class="up">
                <div class="opcation">谢谢参与</div>
                <div class="opcation">美女一枚</div>
                <div class="opcation">帅哥一枚</div>
            </div>
            <div class="center">
                <div class="opcation">游乐场游玩</div>
                <div class="start">开始抽奖</div>
                <div class="opcation">iphoneX</div>
            </div>
            <div class="button">
                <div class="opcation">华晨宝马</div>
                <div class="opcation">奥迪a3</div>
                <div class="opcation">奔驰G1</div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function(){
            $(".start").click(function(){
                let spend = 0
                let num = null
                let timer = null
                //定义一个0-8的随机数
                    //开启一个定时器
                    clearInterval(timer)
                     timer = setInterval(()=>{
                        spend = spend + 1
                         num = Math.round(Math.random()*7)
                        $(".opcation").each(function(k,v){
                            $(".opcation")[k].style.background = "white"
                        })
                            $(".opcation")[num].style.background = "red"
                        if(spend >= 20){
                            clearInterval(timer)
                            setTimeout(()=>{
                                let str = $(".opcation")[num].innerText
                                alert("恭喜您获得"+str)
                            },400)
                        }
                    },100)
            })
            
        })
    </script>
</html>

 

posted @ 2022-04-28 11:08  st-159  阅读(51)  评论(0)    收藏  举报