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

最新推荐文章于 2023-10-20 18:18:53 发布

alibaba_张无忌

最新推荐文章于 2023-10-20 18:18:53 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： js html javascript html5 java

本文链接：https://blog.csdn.net/weixin_45434902/article/details/108746557

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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

1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。

2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。

3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。

4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信息，最后完成输出。

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

<!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>

效果如下

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

alibaba_张无忌

关注

2
点赞
踩
7

收藏

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

ByCaesarChang 合作:[email protected] ~关注我带你看更多精品技术和面试必备么么哒点个赞呗!1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。 3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。 4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信息，最后完成输出。话不多...
复制链接

扫一扫