快捷導(dǎo)航

JS實(shí)現(xiàn)隨機(jī)點(diǎn)名器

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

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

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

實(shí)現(xiàn)一個(gè)簡單的隨機(jī)點(diǎn)名器

需求分析：

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

下面開始實(shí)現(xiàn)

1.編寫html頁面

<div id="dv">
 <input type="button" value="開始點(diǎn)名" id="btu">
 <input type="button" value="停止" id="btu1">
 <div class="luc">你將會(huì)是下一個(gè)幸運(yùn)兒嗎？請看大屏幕</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");
//獲取點(diǎn)擊開始按鈕
var btu=document.getElementById("btu");
//獲取點(diǎn)擊結(jié)束按鈕
var btu1=document.getElementById("btu1");

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

//創(chuàng)建ul列表
var ula=document.createElement("ul");
//將ul追加到父級(jí)元素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"]
//動(dòng)態(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);
}

點(diǎn)擊開始按鈕開始隨機(jī)選擇

//聲明timer
var timer = null;
//點(diǎn)擊開始進(jìn)行隨機(jī)選擇
btu.onclick=function () {
 //每次運(yùn)行之前清除timer;
 clearInterval(timer);
 //設(shè)置定時(shí)器
 timer=setInterval(function () {
  //根據(jù)數(shù)組長度范圍生成隨機(jī)數(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");
  }
  //為隨機(jī)選擇的li重新設(shè)置類樣式
  oLi[i].className="change";
 },50);
};

點(diǎn)擊結(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+"號(hào)";
}

效果圖如下：