快捷導(dǎo)航

JS實現(xiàn)隨機點名器

更新時間：2020年04月12日 07:55:43 作者：一袋星光

這篇文章主要為大家詳細介紹了JS實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)隨機點名器的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)一個簡單的隨機點名器

需求分析：

兩個按鈕實現(xiàn)隨機點名的開始和結(jié)束
創(chuàng)建ul元素，添加到父級div中，實現(xiàn)了每個名字需要放在一個單獨的盒子中
根據(jù)隨機數(shù)進行隨機選擇，（涉及到了兩個函數(shù) setInterval clearInterval）在選擇之前，先清空盒子的所有類樣式，如果被選中，則重新賦予類樣式
當(dāng)點擊停止按鈕時，根據(jù)上一步擁有重新選擇出來的li標(biāo)簽獲取標(biāo)簽內(nèi)容，并且直接可以展示到對應(yīng)的文本框。

下面開始實現(xiàn)

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獲取對應(yīng)元素

//獲取dv元素
var dv=document.getElementById("dv");
//獲取點擊開始按鈕
var btu=document.getElementById("btu");
//獲取點擊結(jié)束按鈕
var btu1=document.getElementById("btu1");

創(chuàng)建ul列表，并且構(gòu)建li數(shù)組這一步其實是在頁面加載之后瀏覽器才實現(xiàn)的

//創(chuàng)建ul列表
var ula=document.createElement("ul");
//將ul追加到父級元素div中
dv.appendChild(ula);
//獲取js中插入的Li標(biāo)簽；
var oLi=document.getElementsByTagName("li");
//插入數(shù)組
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"]
//動態(tài)創(chuàng)建li，追加到ul
for(var i=0;i<arr.length;i++){
 //創(chuàng)建li標(biāo)簽
 var liObj=document.createElement("li");
 liObj.innerText=arr[i];
 ula.appendChild(liObj);
}

點擊開始按鈕開始隨機選擇

//聲明timer
var timer = null;
//點擊開始進行隨機選擇
btu.onclick=function () {
 //每次運行之前清除timer;
 clearInterval(timer);
 //設(shè)置定時器
 timer=setInterval(function () {
  //根據(jù)數(shù)組長度范圍生成隨機數(shù)
  var i = Math.floor(Math.random()*arr.length);
  //通過for循環(huán)清空所有class類樣式
  for(var j=0;j<oLi.length;j++){
   oLi[j].removeAttribute("class");
  }
  //為隨機選擇的li重新設(shè)置類樣式
  oLi[i].className="change";
 },50);
};

點擊結(jié)束按鈕停止選擇

btu1.onclick=function () {
 //清除timer;
 clearInterval(timer);
 //根據(jù)類樣式找到選中的元素
 var choise = document.getElementsByClassName("change")[0];
 //獲取選中元素的內(nèi)容
 var name=choise.innerText;
 //獲取選中展示位置
 var nameSpan = document.getElementsByClassName('name')[0];
 //位置添加內(nèi)容
 nameSpan.innerText=name+"號";
}

效果圖如下：