点名程序

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

点名程序

这种点名程序，从页面中看不到具体有多少姓名，。
html结构代码如下：

    
点名程序
    
周杰伦
    
开始

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结构代码如下：

    
点名程序
    
周杰伦
    
开始
    

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