<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置响应式视图窗口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Roll Call</title>
<style>
/* 设置全局默认样式 */
body,
html {
height: 100%;
/* 使html和body高度占满整个视口 */
margin: 0;
/* 移除默认的边距 */
font-family: Arial, sans-serif;
/* 设置默认字体 */
background-color: #f0f0f0;
/* 设置背景颜色 */
}
/* 设置标题样式 */
.title-container {
display: flex;
/* 使用flexbox布局 */
justify-content: center;
/* 水平居中内容 */
align-items: center;
height: 10%;
/* 设置高度为10% */
background-color: red;
/* 设置背景颜色 */
color: white;
/* 设置字体颜色 */
}
/* 设置主容器样式，用于内容布局 */
.main-container {
display: flex;
/* 使用flexbox布局 */
flex-direction: column;
/* 子项垂直排列 */
height: 90%;
/* 设置高度为90% */
}
/* 设定名字显示区域的样式 */
.name-display {
flex: 5;
/* 占据 2 份的空间 */
display: flex;
/* 使用flexbox布局 */
justify-content: center;
/* 水平居中内容 */
align-items: center;
font-size: 10em;
/* 设置字体大小为 3 倍正常大小 */
border-bottom: 2px solid #000;
/* 设置底部边框 */
}
/* 设定按钮容器的样式 */
.button-container {
display: flex;
/* 使用flexbox布局 */
justify-content: space-around;
/* 按钮之间平均分布 */
align-items: center;
/* 垂直居中内容 */
margin-top: 20px;
/* 按钮组与名字显示区域之间添加间距 */
}
/* 设定按钮的样式 */
button {
padding: 10px 20px;
/* 设置填充 */
font-size: 1.5em;
/* 设置字体大小为 1.5 倍正常大小 */
cursor: pointer;
/* 鼠标悬停时显示指针 */
}
/* 全屏按钮样式 */
.fullscreen-button {
flex: 1;
/* 占据 1 份的空间 */
display: flex;
/* 使用flexbox布局 */
justify-content: center;
/* 水平居中内容 */
align-items: center;
font-size: 1.5em;
/* 设置字体大小 */
cursor: pointer;
position: fixed;
/* 固定定位 */
top: 10px;
/* 距离顶部的位置 */
right: 10px;
/* 距离右侧的位置 */
z-index: 9999;
/* 设置层级 */
}
</style>
</head>
<body>
<div class="title-container">
<h1><span contenteditable="true">可自定义编辑文字</span></h1>
</div>
<div class="main-container">
<!-- 名称显示区域 -->
<div class="name-display" id="nameDisplay">点击按钮开始点名</div>
<!-- 按钮容器 -->
<div class="button-container">
<button id="listButton">名单</button>
<button id="rollCallButton">点名</button>
<button id="addButton">添加名单</button>
<button id="fullscreenButton">全屏</button>
</div>
</div>
<a href="https://space.bilibili.com/286436365" target="_blank" style="text-align: center; display: block;">大飞哥软件自习室</a>
<script>
// 预设名单数组
var namesList = ["Alice", "Bob", "Charlie", "David", "Eva"];
// 更新名单函数：当点击“名单”按钮时，提示用户输入新的名单
function updateNamesList() {
var newNames = prompt("请输入名单，用逗号分隔：", namesList.join(", "));
if (newNames) {
namesList = newNames.split(',').map(name => name.trim());
}
}
// 随机点名函数：当点击“点名”按钮时，从名单中随机选择一个名字
function randomRollCall() {
var randomIndex = Math.floor(Math.random() * namesList.length);
var randomName = namesList[randomIndex];
document.getElementById("nameDisplay").innerText = randomName;
}
// 添加名单函数：当点击“添加名单”按钮时，将输入的名单添加到名单数组末尾
function addNamesToList() {
var inputNames = prompt("请输入要添加的名单，用逗号分隔：");
if (inputNames) {
var newNames = inputNames.split(',').map(name => name.trim());
namesList = namesList.concat(newNames);
}
}
// 全屏按钮点击事件处理函数
function toggleFullScreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} if (elem.mozRequestFullscreen) {
elem.mozRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
// 给按钮添加事件监听器，监听点击事件
document.getElementById("listButton").addEventListener("click", updateNamesList);
document.getElementById("rollCallButton").addEventListener("click", randomRollCall);
document.getElementById("addButton").addEventListener("click", addNamesToList);
document.getElementById("fullscreenButton").addEventListener("click", toggleFullScreen);
</script>
</body>
</html>
姓名抽奖软件随机点名助手-完全免费让点名变得轻松有趣的神奇软件.rar
需积分: 0 140 浏览量
2024-05-01
21:26:49
上传
评论
收藏 14.8MB RAR 举报
姓名抽奖软件随机点名助手——完全免费让点名变得轻松有趣的神奇软件.rar （3个子文件） 
姓名抽奖软件随机点名助手——完全免费让点名变得轻松有趣的神奇软件.mp4 17.59MB
随机点名助手——让点名变得轻松有趣的神奇软件.html 5KB
姓名抽奖软件随机点名助手——完全免费让点名变得轻松有趣的神奇软件.jpg 824KB资源评论
