本文例項為大家分享了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，追加到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+"號";
}

效果圖如下：

以上就是所有的程式碼，不周之處請教之，思想需要碰撞，知識需要交流嘿嘿，再分享一句今日正能量小金句：當前你所遇見的所有困境，都將成為你以後不斷上升的階梯；加油！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。