【金秋打卡】第十七天 抽奖系统

第一模块：

课程名称：DOM事件探秘

章节：4-4~4-5

讲师名称：Amy

第二模块:

keyDown：当用户按下键盘上的任意键时触发，而且如果按住不放开的话，会重复触发此事件

keyPress：当用户按下键盘上的任意键时触发，而且如果按住不放开的话，会重复触发此事件

keyUp：当用户释放键盘上的键时触发

第三模块：

<div id="box">
        <button type="button" id="start">抽奖</button>
    </div>
    <script>
        var names = ["香蕉","苹果","橘子","梨","橙子","火龙果","提子"];

        function extrust(){
            var index = parseInt(Math.random()*names.length);
                names.splice(index,1);//从参与人中删除中奖人
                document.getElementById('winner').innerText = names[index];
        }

        let start = false;
        var flag;//定时任务标记
        document.getElementById("start").addEventListener('click',function () {
            if(names.length == 0){
                document.getElementById('winner').innerText ="抽奖结束";
                return;
            }
            if(start) {
                //清除指定标记的定时任务
                clearInterval(flag);
                extrust();
            }else{
                flag =setInterval(function () {
                    document.getElementById('winner').innerText = names[parseInt(Math.random()*names.length)];
                },20)
            }
            //状态取反
            start = !start;
        })


    </script>
</body>

<style>
        body{
                width:100vw;
                height:100vh;
            background-color: pink;
        }
        #box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -250px 0 0 -250px;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
            width: 500px;
            height: 300px;
            background: rgba(255,255,255,0.5);
            border-radius: 10px;
            box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
        }

        #start{
            margin: 0;
            height: 50px;
            width: 120px;
            font-size: 30px;
            color: darkred;
            opacity: 0.6;
            box-shadow: 3px 3px 3px #f00;
        }
       
    </style>

第四模块：