第一篇使用HTML写一个随机点名网页
一、代码如下
<!DOCTYPE html>
<html lang="en">
<head><!-- 基础元信息 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点名案例</title><style>/* 全局样式重置 */*{margin: 0;padding: 0;box-sizing: border-box;}/* 页面背景 */body {background-color: #ebf2ff;}/* 主容器样式 */.container {margin: 250px auto; /* 垂直居中 */width: 500px;height: 300px;background-color: #fff;text-align: center;border-radius: 20px;box-shadow:5px 5px 5px rgb(180, 178, 178); /* 添加阴影效果 */}/* 标题区域 */.h {margin-top: 20px;}h1 {font-family: 'Times New Roman', Times, serif;}/* 显示名字的区域 */.name {margin: 50px 0;text-align: center;}.name .draw {font-family: 'Times New Roman', Times, serif;font-size: 40px;color: red; /* 强调显示的名字 */}/* 按钮区域 */.btns {display: flex;margin: 50px auto;width: 400px;justify-content: space-around; /* 按钮均匀分布 */}.btns button {border: none;border-radius: 10px;width: 80px;height: 40px;font-family: 'Times New Roman', Times, serif;font-size: 20px;}/* 开始按钮样式 */.btns .start {background-color: #90e2ae; /* 绿色系 */}.btns .start:hover {background-color: #63e492;cursor: pointer;}/* 结束按钮样式 */.btns .end {background-color: #f7a1a1; /* 红色系 */}.btns .end:hover {background-color: #f07777;cursor: pointer;}/* 重置按钮样式 */.btns .reset {background-color: #9dc0fa; /* 蓝色系 */}.btns .reset:hover {background-color: #70a2f1;cursor: pointer;}</style>
</head>
<body><!-- 主容器 --><div class="container"><!-- 标题区域 --><div class="h"><h1>Draw names by random:</h1></div><!-- 显示随机名字的区域 --><div class="name"><span class="draw">Here will show your name!</span></div><!-- 操作按钮区域 --><div class="btns"><button class="start">Start</button><button class="end">End</button><button class="reset">Reset</button></div></div><script>// 数据：存储待抽取的名单数组 let arr = ['张飞', '赵云', '狂铁', '关羽', '曹操']// 获取DOM元素 const draw = document.querySelector('.draw') // 显示名字的元素 const start = document.querySelector('.start') // 开始按钮 const end = document.querySelector('.end') // 结束按钮 const reset = document.querySelector('.reset') // 重置按钮 // 全局变量 let timeId = 0 // 用于存储计时器ID，便于清除 let random = 0 // 存储随机生成的数组索引 // 初始化按钮状态 start.disabled = false // 开始按钮可用 end.disabled = true // 结束按钮不可用 reset.disabled = true // 重置按钮不可用 // 开始抽取按钮事件监听 start.addEventListener('click', ()=>{// 设置定时器，每80毫秒更新一次显示的名字 timeId = setInterval(() => {random = parseInt(Math.random() * arr.length) // 生成0到数组长度-1的随机整数 draw.innerHTML = arr[random] // 显示随机名字 }, 80)// 更新按钮状态 start.disabled = true end.disabled = false reset.disabled = true // 检查是否只剩最后一个名字 if (arr.length === 1){end.disabled = true reset.disabled = false alert('名单已抽取完！')}})// 停止抽取按钮事件监听 end.addEventListener('click', ()=>{clearInterval(timeId) // 清除定时器 end.disabled = true // 禁用结束按钮 start.disabled = false // 启用开始按钮 arr.splice(random, 1) // 从数组中移除已被抽中的名字 console.log(arr); // 调试用：打印剩余名单 })// 重置按钮事件监听 reset.addEventListener('click', ()=>{arr = ['张飞', '赵云', '狂铁', '关羽', '曹操'] // 重置名单数组 clearInterval(timeId) // 清除可能存在的定时器 draw.innerHTML = "Here will show your name!" // 恢复默认显示文本 start.disabled = false // 启用开始按钮 end.disabled = true // 禁用结束按钮 reset.disabled = true // 禁用重置按钮 })</script>
</body>
</html>二、运行的结果
desktop 2025-10-24 17-11-53
三、说明
如果你想要换成你的名单，请更改下面代码中的数组。
let arr = ['张飞', '赵云', '狂铁', '关羽', '曹操']