基本信息
源码名称:简单的上课点名器
源码大小:2.20KB
文件格式:.html
开发语言:CSS
更新时间:2025-09-21
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 1 元×
微信扫码支付:1 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
一个简单的上课点名器 便于老师使用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简单上课点名器</title> <style> body { font-family: "Microsoft YaHei", sans-serif; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; padding: 30px 50px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-align: center; } h1 { margin-bottom: 20px; color: #333; } #nameDisplay { font-size: 2em; margin: 20px 0; color: #007BFF; min-height: 40px; } button { padding: 10px 20px; font-size: 1em; border: none; border-radius: 5px; background-color: #28a745; color: #fff; cursor: pointer; transition: background 0.3s; } button:hover { background-color: #218838; } input { padding: 5px; margin-bottom: 10px; width: 80%; font-size: 1em; } </style> </head> <body> <div class="container"> <h1>上课点名器</h1> <input type="text" id="studentNames" placeholder="输入学生名字,用逗号分隔"> <div id="nameDisplay"></div> <button onclick="pickRandomName()">随机点名</button> </div> <script> function pickRandomName() { const input = document.getElementById('studentNames').value; if(!input) { alert("请先输入学生姓名!"); return; } const names = input.split(',').map(name => name.trim()).filter(name => name); if(names.length === 0) { alert("请输入有效的学生姓名!"); return; } const randomIndex = Math.floor(Math.random() * names.length); document.getElementById('nameDisplay').textContent = names[randomIndex]; } </script> </body> </html>