我们平常看到的点名程序有两种，第一种如下图：
点名程序
这种点名程序，从页面中看不到具体有多少姓名，。
html结构代码如下：
<center>
<h1>点名程序</h1>
<div class="nameBox">周杰伦</div>
<div class="button">开始</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');
// 定义所有姓名的数组
var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十'];
// 定义定时器变量
var timerId;
// 点击开始
btn.onclick = function(){
if(this.innerText === '开始'){
// 开始了就将内容换成停止
this.innerText = '停止';
// 定时器 - 每隔一会就更换div中的姓名
timerId = setInterval(function(){
// 获取一个随机下标
var index = Math.floor(Math.random() * arr.length)
// 根据下标获取随机姓名
var name = arr[index]
// 将姓名放在div中
nameBox.innerText = name
},20)
}else{
// 停止了就将内容换成开始
this.innerText = '开始'
// 停止定时器
clearInterval(timerId)
}
}
第二种点名程序如下图：
点名程序
这种点名程序，可以从页面中看到具体有多少姓名参与，类似于抽奖。
html结构代码如下：
<center>
<h1>点名程序</h1>
<div class="nameBox">周杰伦</div>
<div class="button">开始</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代码如下：
// 不让内容选中
document.body.onselectstart = function(){
return false;
}
// 获取所有标签
// 获取所有元素
var nameBox = document.querySelector('.nameBox');
var btn = document.querySelector('.button');
var oUl = document.querySelector('ul');
// 定义所有姓名的数组
var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十'];
// 根据数组创建li，放在ul中
for(var i=0;i<arr.length;i++){
// 创建li
var li = document.createElement('li')
// 给li放内容
li.innerText = arr[i]
// 将li放到ul中
oUl.appendChild(li)
}
// 定义定时器变量
var timerId;
// 点击开始
btn.onclick = function(){
// 如果是开始就将内容换成停止
if(this.innerText === '开始'){
this.innerText = '停止';
// 设置定时器，每隔一小会将粉色背景设置给另一个随机div
timerId = setInterval(function(){
// 将所有li的背景颜色设置为透明
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.backgroundColor = 'transparent';
}
// 随机获取一个li的下标
var index = Math.floor(Math.random() * oUl.children.length)
// 将这li设置为粉色背景
oUl.children[index].style.backgroundColor = 'hotpink';
// 将这个姓名放在div中
nameBox.innerText = oUl.children[index].innerText
},50)
}else{
// 如果停止了就切换内容
this.innerText = '开始';
// 停止定时器
clearTimeout(timerId)
}
}
