本文详细介绍如何使用 JavaScript 实现一个随机点名器。通过 HTML 构建界面，CSS 美化样式，JS 利用 setInterval 和 clearInterval 控制随机滚动效果，并结合 DOM 操作动态生成列表与高亮选中项，最终在停止时显示结果。
随机点名器功能概述
本文分享了使用 JavaScript 实现随机点名器的完整代码方案，供读者参考学习。
本教程旨在演示如何构建一个基础的随机点名应用。
功能需求分析如下：
需要两个按钮分别控制随机点名的开始与停止。界面需创建 ul 元素并嵌入父级 div，确保每个名字独立显示在单独的列表项中。逻辑上，利用随机数生成机制，在滚动过程中先清除所有列表项的样式，再为当前选中的项添加高亮样式。点击停止按钮后，程序需读取当前高亮列表项的内容，并将其显示在指定的文本区域中。
接下来进入具体实现环节。
HTML 页面结构搭建
第一步是编写 HTML 页面结构。
<div id="dv">
<input type="button" value="开始点名" id="btu">
<input type="button" value="停止" id="btu1">
<div class="luc">你将会是下一个幸运儿吗？请看大屏幕</div>
<div class="ch">
<span class="name"></span>
</div>
</div>CSS 样式设计
第二步是定义页面的 CSS 样式。
*{
margin: 0px;
padding: 0px;
}
body{
background-color: cornsilk;
}
#dv{
width: 800px;
margin: 20px auto;
border: 4px solid darkviolet;
text-align: center;
}
ul li{
vertical-align: top;
display: inline-block;
width: 100px;
height: 50px;
border-radius: 35%;
border: 3px dashed palevioletred;
text-align: center;
line-height: 50px;
margin: 5px 5px;
}
li.change{
background-color: greenyellow;
font-size: 15px;
color: black;
font-weight: bolder;
}
#btu,#btu1{
width: 100px;
height: 50px;
font-size: 15px;
border-radius: 10px;
cursor: pointer;
margin: 10px 50px 0 50px;
color: brown;
background-color: pink;
}
.ch{
position: relative;
width: 150px;
height: 150px;
border-radius: 10px;
margin: 12px auto;
border: 2px solid yellow;
}
.luc{
font-size: 20px;
font-weight: bold;
margin: 10px auto;
text-align: center;
color: green;
}
.name{
position: absolute;
font-size: 35px;
left: 40px;
top: 50px;
}JavaScript 核心逻辑实现
第三步是编写核心 JavaScript 代码。
首先通过 DOM 方法获取页面中对应的元素节点。
//获取dv元素
var dv=document.getElementById("dv");
//获取点击开始按钮
var btu=document.getElementById("btu");
//获取点击结束按钮
var btu1=document.getElementById("btu1");随后创建 ul 列表并构建包含姓名的数组。该初始化过程在页面加载完成后由浏览器执行。
//创建ul列表
var ula=document.createElement("ul");
//将ul追加到父级元素div中
dv.appendChild(ula);
//获取js中插入的Li标签；
var oLi=document.getElementsByTagName("li");
//插入数组
var arr=["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]
//动态创建li，追加到ul
for(var i=0;i<arr.length;i++){
//创建li标签
var liObj=document.createElement("li");
liObj.innerText=arr[i];
ula.appendChild(liObj);
}实现点击开始按钮触发随机选择逻辑。
//声明timer
var timer = null;
//点击开始进行随机选择
btu.onclick=function () {
//每次运行之前清除timer;
clearInterval(timer);
//设置定时器
timer=setInterval(function () {
//根据数组长度范围生成随机数
var i = Math.floor(Math.random()*arr.length);
//通过for循环清空所有class类样式
for(var j=0;j<oLi.length;j++){
oLi[j].removeAttribute("class");
}
//为随机选择的li重新设置类样式
oLi[i].className="change";
},50);
};实现点击结束按钮终止选择并展示结果。
btu1.onclick=function () {
//清除timer;
clearInterval(timer);
//根据类样式找到选中的元素
var choise = document.getElementsByClassName("change")[0];
//获取选中元素的内容
var name=choise.innerText;
//获取选中展示位置
var nameSpan = document.getElementsByClassName('name')[0];
//位置添加内容
nameSpan.innerText=name+"号";
}运行效果如下图所示：
以上即为全部代码实现。如有不足之处欢迎指正，思想碰撞与知识交流至关重要。最后分享一句正能量语录：当前所遇困境，终将化作未来上升的阶梯；加油！
本文内容希望对您的学习有所帮助，欢迎继续支持本站。