JavaScript——随机点名练习

最新推荐文章于 2024-04-24 18:14:24 发布

鹿蹊zz

最新推荐文章于 2024-04-24 18:14:24 发布

阅读量3.2k

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端随机点名

本文链接：https://blog.csdn.net/m0_46461853/article/details/125728990

版权

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

随机点名

要求：

当点击开始按钮时，名单会随机变换跳动显示，开始按钮变成了停止按钮；

当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，达到随机点名效果。

思路：

1、使用 HTML+CSS 布局出随机点名系统的页面。

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

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

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style type="text/css">
        /* 设置点名器位置居中 */
        .box {
            width: 200px;
            margin: auto;
            margin-top: 20px;
        }
        /* 设置点名区域 */
        .box div {
            background: pink;
            color: #fff;
            width: 100%;
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-size: 18px;
        }
        /* 设置按钮区域 */
        .box button {
            width: 100%;
            height: 35px;
            text-align: center;
            margin-top: 10px;
            border: 0px;
            background: grey;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="realname">准备点名</div>
        <button onclick="call()" id="btn">开始</button>
    </div>
    <script>
        var realnames = ["张三", "李四", "王五", "赵六", "陆七"];
        var realname = document.getElementById("realname");
        var flag = false;
        var btn = document.getElementById("btn");

        function call() {
            
            // flag标记true和false实现按钮的“开始”和“暂停”
            flag = !flag;
            if (flag) {
                //设置定时器setinterval()，实现自动点击的效果
                window.myInter = setInterval(function () {
                    // Math.random()获取到一个随机数、Math.floor()向下取整
                    var num = Math.floor(Math.random() * realnames.length);
                    realname.innerHTML = realnames[num];
                }, 100);
                // 修改按钮为停止
                btn.innerText = "停止";
            }else {
                // 清除定时器
                clearInterval(window.myInter);
                // 修改按钮为开始
                btn.innerText = "开始";
            }
        }

    </script>
</body>

</html>

效果：

鹿蹊zz

关注

9
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——随机点名练习

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

扫一扫

专栏目录