点名程序

我们平常看到的点名程序有两种，第一种如下图：

点名程序

这种点名程序，从页面中看不到具体有多少姓名，。
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)
    }  
}