HTML随机点名程序

案例要求

1.点击点名按钮,名字界面随机显示,按钮文字由点名变为停止

2.再次点击点名按钮,显示当前被点名学生姓名,按钮文字由停止变为点名

案例源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Student Picker</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .container {
        text-align: center;
    }
    #nameDisplay {
        font-size: 24px;
        margin-bottom: 20px;
    }
    #toggleButton {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }
</style>
</head>
<body>

<div class="container">
    <div id="nameDisplay"></div>
    <button id="toggleButton">点名</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var students = ["小明", "小红", "小李", "小张", "小王", "小刚", "小花", "小美", "小华", "小军", "小强", "小丽", "小明", "小红", "小李", "小张", "小王", "小刚", "小花", "小美", "小华", "小军", "小强", "小丽"];

    var interval;
    var isPicking = false;

    $('#toggleButton').click(function() {
        if (isPicking) {
            clearInterval(interval);
            isPicking = false;
            $(this).text('点名');
        } else {
            isPicking = true;
            $(this).text('停止');
            interval = setInterval(function() {
                var randomIndex = Math.floor(Math.random() * students.length);
                $('#nameDisplay').text(students[randomIndex]);
            }, 100);
        }
    });
});
</script>
</body>
</html>

案例效果图

相关推荐
醉の虾16 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧24 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm34 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter