本文实例为大家分享了JS实现随机点名器的具体代码，供大家参考，具体内容如下

实现一个简单的随机点名器

需求分析：

两个按钮实现随机点名的开始和结束
创建ul元素，添加到父级div中，实现了每个名字需要放在一个单独的盒子中
根据随机数进行随机选择，（涉及到了两个函数 setInterval clearInterval）在选择之前，先清空盒子的所有类样式，如果被选中，则重新赋予类样式
当点击停止按钮时，根据上一步拥有重新选择出来的li标签获取标签内容，并且直接可以展示到对应的文本框。

下面开始实现

1.编写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>

2.页面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;}

3.js代码

DOM获取对应元素

//获取dv元素var dv=document.getElementById("dv");//获取点击开始按钮var btu=document.getElementById("btu");//获取点击结束按钮var btu1=document.getElementById("btu1");

创建ul列表，并且构建li数组 这一步其实是在页面加载之后浏览器才实现的

//创建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，追加到ulfor(var i=0;i<arr.length;i++){ //创建li标签 var liObj=document.createElement("li"); liObj.innerText=arr[i]; ula.appendChild(liObj);}

点击开始按钮开始随机选择

//声明timervar 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+"号";}

效果图如下：

以上就是所有的代码，不周之处请教之，思想需要碰撞，知识需要交流嘿嘿，再分享一句今日正能量小金句：当前你所遇见的所有困境，都将成为你以后不断上升的阶梯；加油！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。