我們平常看到的點(diǎn)名程序有兩種茁彭，第一種如下圖：
點(diǎn)名程序
這種點(diǎn)名程序廊移，從頁(yè)面中看不到具體有多少姓名笋粟，。
html結(jié)構(gòu)代碼如下：
<center>
<h1>點(diǎn)名程序</h1>
<div class="nameBox">周杰倫</div>
<div class="button">開(kāi)始</div>
</center>
css樣式代碼如下：
h1{
font-size: 50px;
}
.nameBox{
width: 300px;
height: 100px;
border:1px solid #000;
font-size: 80px;
font-weight: bold;
line-height: 100px;
text-align: center;
margin:0 0 20px 0;
}
.button{
width: 200px;
height: 50px;
border:1px solid #ccc;
background-color: #eee;
border-radius:5px;
line-height: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.button:hover{
cursor: pointer;
}
js代碼如下：
// 獲取所有元素
var nameBox = document.querySelector('.nameBox');
var btn = document.querySelector('.button');
// 定義所有姓名的數(shù)組
var arr = ['劉一','陳二','張三','李四','王五','趙六','孫七','周八','吳九','鄭十'];
// 定義定時(shí)器變量
var timerId;
// 點(diǎn)擊開(kāi)始
btn.onclick = function(){
if(this.innerText === '開(kāi)始'){
// 開(kāi)始了就將內(nèi)容換成停止
this.innerText = '停止';
// 定時(shí)器 - 每隔一會(huì)就更換div中的姓名
timerId = setInterval(function(){
// 獲取一個(gè)隨機(jī)下標(biāo)
var index = Math.floor(Math.random() * arr.length)
// 根據(jù)下標(biāo)獲取隨機(jī)姓名
var name = arr[index]
// 將姓名放在div中
nameBox.innerText = name
},20)
}else{
// 停止了就將內(nèi)容換成開(kāi)始
this.innerText = '開(kāi)始'
// 停止定時(shí)器
clearInterval(timerId)
}
}
第二種點(diǎn)名程序如下圖：
點(diǎn)名程序
這種點(diǎn)名程序埃唯，可以從頁(yè)面中看到具體有多少姓名參與撩匕，類似于抽獎(jiǎng)。
html結(jié)構(gòu)代碼如下：
<center>
<h1>點(diǎn)名程序</h1>
<div class="nameBox">周杰倫</div>
<div class="button">開(kāi)始</div>
<ul></ul>
</center>
css樣式代碼如下：
h1{
font-size: 50px;
}
.nameBox{
width: 300px;
height: 100px;
border:1px solid #000;
font-size: 80px;
font-weight: bold;
line-height: 100px;
text-align: center;
margin:0 0 20px 0;
}
.button{
width: 200px;
height: 50px;
border:1px solid #ccc;
background-color: #eee;
border-radius:5px;
line-height: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.button:hover{
cursor: pointer;
}
ul{
list-style: none;
padding: 0;
margin: 0;
width: 300px;
}
ul:after{
content:'';
display:block;
clear:both;
}
ul li{
float:left;
margin:5px;
padding: 5px;
border:1px solid #ccc;
}
js代碼如下：
// 不讓內(nèi)容選中
document.body.onselectstart = function(){
return false;
}
// 獲取所有標(biāo)簽
// 獲取所有元素
var nameBox = document.querySelector('.nameBox');
var btn = document.querySelector('.button');
var oUl = document.querySelector('ul');
// 定義所有姓名的數(shù)組
var arr = ['劉一','陳二','張三','李四','王五','趙六','孫七','周八','吳九','鄭十'];
// 根據(jù)數(shù)組創(chuàng)建li墨叛，放在ul中
for(var i=0;i<arr.length;i++){
// 創(chuàng)建li
var li = document.createElement('li')
// 給li放內(nèi)容
li.innerText = arr[i]
// 將li放到ul中
oUl.appendChild(li)
}
// 定義定時(shí)器變量
var timerId;
// 點(diǎn)擊開(kāi)始
btn.onclick = function(){
// 如果是開(kāi)始就將內(nèi)容換成停止
if(this.innerText === '開(kāi)始'){
this.innerText = '停止';
// 設(shè)置定時(shí)器止毕，每隔一小會(huì)將粉色背景設(shè)置給另一個(gè)隨機(jī)div
timerId = setInterval(function(){
// 將所有l(wèi)i的背景顏色設(shè)置為透明
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.backgroundColor = 'transparent';
}
// 隨機(jī)獲取一個(gè)li的下標(biāo)
var index = Math.floor(Math.random() * oUl.children.length)
// 將這li設(shè)置為粉色背景
oUl.children[index].style.backgroundColor = 'hotpink';
// 將這個(gè)姓名放在div中
nameBox.innerText = oUl.children[index].innerText
},50)
}else{
// 如果停止了就切換內(nèi)容
this.innerText = '開(kāi)始';
// 停止定時(shí)器
clearTimeout(timerId)
}
}
