随机点名器制作来使用 HTML+JavaScript 来实现如下图所示的随机点 名器，第一张图是随机点名器的初始页面，当点击开始按钮时，JS 程序中提 前准备好人员（数组）名单会随机变换跳动显示，开始

2021-01-26 15:35:49 浏览数 (1)

~关注我 带你看更多精品技术和面试必备 么么哒 点个赞呗!

1、使用 HTML CSS 布局出如上图所示的随机点名器页面。 2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。 3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。 4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信 息，最后完成输出。

话不多说 直接上代码 非常简单 直接开源把他

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>随机点名器</title>
    <style type="text/css">
        #parent {
            background-color: orangered;
            height: 500px;
            border-radius: 10px;
            width: 700px;
            margin: 100px auto;
            position: relative;
        }
        
        #box {
            margin: auto;
            width: 400px;
            font-size: 66px;
            border: 1px solid black;
            font-weight: bold;
            height: 94px;
            border-radius: 20px;
            text-align: center;
            background-color: antiquewhite;
            position: absolute;
            margin-top: 100px;
            margin-left: 140px;
        }
        
        #bt {
            margin: auto;
            border-radius: 10px;
            background-color: green;
            width: 200px;
            text-align: center;
            margin-top: 300px;
            margin-left: 240px;
            color: #070000;
            font-weight: bold;
            font-size: 25px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var namelist = ["张旭", "扈俊睿", "赵好冲", "赵六", "孙七"];
        var mytime = null;

        function doit() {
            var bt = window.document.getElementById("bt");
            if (mytime == null) {
                bt.style.backgroundColor = "#ff0000";
                bt.innerHTML = "停止";
                show();
            } else {
                bt.style.backgroundColor = "#00a03e";
                bt.innerHTML = "开始";
                clearTimeout(mytime);
                mytime = null;
            }
        }

        function show() {
            var box = window.document.getElementById("box");
            var num = Math.floor((Math.random() * 100000)) % namelist.length;
            box.innerHTML = namelist[num];
            mytime = setTimeout("show()", 10);
        }
    </script>
</head>

<body>
    <div id="parent">
        <div id="box">随机点名器</div>
        <button id="bt" onclick="doit()">开始</button>
    </div>
</body>

</html>

效果如下

html 布局 定时器 面试 事件

0 人点赞