<!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>中奖名单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .container {
            width: 600px;
            margin: 0 auto;
            line-height: 120px;
            text-align: center;
        }

        .start-btn {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: indigo;
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 28px;
        }

        .start-btn:hover {
            background-color: #6906af;
        }

        .person {
            color: red;
            font-size: 88px;
            height: 100px;
        }

        .stop-btn {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: #004382;
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 28px;
        }

        .stop-btn:hover {
            background-color: #155fa3;
        }

        .auto-btn {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: #008241;
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 28px;
        }

        .auto-btn:hover {
            background-color: #5d9e7e;
        }


        .message {
            visibility: hidden;
        }

        .p1 {
            color: seagreen;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>中奖同学</h1>
        <div class="person"></div>
        <h1 class="message">恭喜 <span class="p1"></span> 同学中奖，请回答问题！</h1>
        <a href="#" class="start-btn">开始抽奖</a>
        <a href="#" class="stop-btn">停止抽奖</a>
        <a href="#" class="auto-btn">自动计时</a>
    </div>
    <script>
        var students = ['王一','王二','王三','王四','王五','王六','王七','王八','王九',
'王十','王十一','王十二','王十三','王十四','王十五','王十六','王十七','王十八','王十九','王二十',]

        var startBtn = document.querySelector('.start-btn')
        var stopBtn = document.querySelector('.stop-btn')
        var autoBtn = document.querySelector('.auto-btn')

        var intervalTimer
        var autoTimer
        var student
        var isStart = false // false停止 true开始

        startBtn.addEventListener('click', function () {
            start()
        })
        stopBtn.addEventListener('click', function () {
            stop()
        })

        //自动计时

        autoBtn.addEventListener('click', function () {
            var count = 3
            autoBtn.innerHTML = count
            start()
            autoTimer = setInterval(function () {
                autoBtn.innerHTML = count
                count--
                if (count == 0) {
                    autoBtn.innerHTML = '自动计时'
                    stop()
                    clearInterval(intervalTimer)
                    clearInterval(autoTimer)
                }
            }, 1000)

        })

        //开始
        function start() {
            isStart = true
            document.querySelector('.message').style.visibility = 'hidden'
			
            intervalTimer = setInterval(function () {
                var index = getRandom(0, students.length)
                student = students[index]
                document.querySelector('.person').innerHTML = student
            }, 100)
        }
        //停止
        function stop() {
            if (typeof (intervalTimer) == 'undefined')
                return
            document.querySelector('.message').style.visibility = 'visible'
            document.querySelector('.p1').innerHTML = student
            clearInterval(intervalTimer)
            clearInterval(autoTimer)
            isStart = false
        }

        // 生成n到m的随机数
        function getRandom(n, m) {
            var random = Math.round(Math.random() * (m - n) + n)
            return random
        }

        document.onkeydown = function (e) { // 回车提交表单
            // 兼容FF和IE和Opera
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 32) {
                if (isStart == false) {
                    start()
                } else {
                    stop()
                }
            }
        }


    </script>
</body>

</html>