html+css+JavaScript点名器

运行效果：

代码如下：

<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>
</head>
<style>

    body{
        background-image: url(img/bg.png);
        }

    .big{
       background-color: aliceblue;
       width:400px;
       height: 500px;
       border-radius: 30px;
       margin: 50px auto;
       padding-top: 20px;
        }

    .title{
        font-size: 50px;
        text-align: center; 
        font-weight: 520;
            }

    #show {
        width: 300px;
        height: 200px;
        background-color: aliceblue;
        line-height: 200px;
        font-size: 30px;
        text-align: center;
        border: 1.5px solid black;
        border-radius: 10px;
        margin: 20px auto;
    }

    .button{
        margin: 10px 85px;
    }
    .start{
       height: 40px;
       margin: auto;
       width: 100px;
    }
    .end{
        margin-left:20px; 
        height: 40px;
        width: 100px;
    }

    #div1 {
        width: 350px;
        height: 50px;
        background-color: aliceblue;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        border: 1px solid black;
        margin: 20px auto;
    }
    .footer{
        text-align: right;
    }

</style>
<body>
    <div class="big" >
        <div class="title">随机点名</div>
        <div id="show"></div>
        <div class="button">
            <button class="start" onclick="startName()" >开始点名</button>
            <button class="end" onclick="endName()" >结束点名</button>
        </div>  
        <div id="div1"></div>
    </div>
</body> 
<script>    
    var names = ['张三', '李四', '王五', 
                 '张杰', '谢娜', '何炅', 
                 '李维嘉', '吴昕', '杜海涛', 
                 '沈梦辰', '王一博', '肖杰'];
    var interval;
    var div1 = document.querySelector('#div1');
    var show = document.querySelector('#show');
    var number;
    show.innerHTML="亲,准备后点名了吗?";

    function startName() {
        clearInterval(interval);
        interval = setInterval(function () {
            number = Math.random() * (names.length - 1);
            number = Math.round(number);
            show.innerHTML = names[number];
        }, 50);
    };

    function endName() {
        clearInterval(interval);
        div1.innerHTML = "请"+names[number]+"同学回答问题";
    };
</script>

<footer class="footer">
    king
</footer>
 
</html>

资源下载地址：

【免费】html+css+JavaScript点名器资源-CSDN文库