利用html css JavaScript做个简单的抽奖系统

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
    }
    .demo01{
        
        position: relative;
        height: 300px;
        width: 500px;
        text-align: center;
        background-color: rgb(233, 193, 230,.6);
        border-radius: 10px;
        box-shadow: 2px 2px rgb(0, 0, 0,0.2);
    }
    h2{
        color: rgb(0, 0, 0,0.4)
    }
    button{
        position: absolute;
        left: 180px;
        top: 200px;
        height: 30px;
        width: 150px;
        border-radius: 8px;
        color: rgb(0, 0, 0,0.7);
        background-color: rgb(255,255,255,.4);
        cursor: pointer;
    }
    input{
        height: 50px;
        font-size: 19px;
    }
    table{
        position: absolute;
        left: 100;
        top: 100;
    }
    P{
        position: absolute;
        top: 400px;
        left: 810px;

        
    }

</style>
<body>
    <div class="demo01">
        <h2>抽奖系统</h2>
        <div class="demo02">广告时间</div>
        <button>开始抽奖</button>
    </div>
    <table border="2" cellspacing='1'>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>实验项目</th>
            </tr>
        </thead>
        <tbody>
            <td>00000000</td>
            <td>小韦</td>
            <td>编写一个抽奖系统</td>
            <p>5秒后自动关闭</p>
        </tbody>
        
    </table>
    <script>
        var btn=document.querySelector('button');
        var div=document.querySelector('.demo02');
        var i=5;
        var s=5;
        var table=document.querySelector('table');
        var p=document.querySelector('p');
        btn.addEventListener('click',function(){
            var min=prompt('从几号开始');
            var max=prompt('从几号结束');
            // alert('抽中的号码是：'+getRandomInt(min,max));
            div.innerHTML='抽中的号码是：'+getRandomInt(min,max);
            var timer=setInterval(function(){
                if(i!=0){
                    btn.innerHTML='下次抽奖还需要'+i+'秒';
                    btn.disabled='true';
                    i--;
                }else{
                    clearInterval(timer);
                    btn.innerHTML='开始抽奖';
                    btn.disabled='false';
                    i=5;
                }
            },1000)
            function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
        })
        setInterval(() => {
            s--;
            p.innerHTML=s+'秒后自动关闭';
            if(s==0){
                table.style.display='none';
                p.style.display='none';
                div.innerHTML='一会抽中的号码会在这里';
            }
        }, 1000);
        
    

    </script>
</body>
</html>
利用html css JavaScript做个简单的抽奖系统

猜你喜欢
