用js写一个点名器

用js写一个简单的点名器
首先是样式

div id="dm">
    <input type="button" value="开始点名" id="btu">
    <input type="button" value="停止" id="bt">
    <div class="user">
        <span class="name"></span>
    </div>
</div>

其次是用css写的样式

<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body{
        position:relative;
    }
    #dm {
        text-align: center;
    }
    ul{
        position:absolute;
        top:100px;
        left:20%;
    }
    ul li {
        vertical-align: top;
        display: inline-block;
        width: 100px;
        height: 50px;
        border: 3px solid #333;
        text-align: center;
        line-height: 50px;
        margin: 5px 5px;
    }
    li.change {
        background-color: orange;
        font-size: 15px;
        color: black;
        font-weight: bolder;
        }#btu{position:absolute;
        top:200px;
        left:30%;
    }
    #bt{
        position:absolute;
        top:200px;
        left:50%;
    }
    #btu,#bt {
        width: 100px;
        height: 50px;
        font-size: 15px;
        border-radius: 10px;
        cursor: pointer;
        margin: 10px 50px 0 50px;
        color: skyblue;
    }
    .user {
        position: relative;
        width: 150px;
        height: 30px;
        border-radius: 10px;
        margin: 12px auto;
        border: 2px solid yellow;
        position:absolute;
        left:40%;
        top:300px;
    }
    .name {
        position: absolute;
        font-size: 15px;
        left: 60px;
        top: 5px;
    }
</style>

然后用js实现效果

<script>
	var dv = document.getElementById("dm");
	var btu = document.getElementById("btu");//声明开始点名
	var btu1 = document.getElementById("bt");//声明停止
	var ula = document.createElement("ul");//创建一个ul标签
	dv.appendChild(ula);
	var oLi = document.getElementsByTagName("li");
	var arr = ["张三", "李四", "王五", "小红", "小王", "小张"]
	for (var i = 0; i < arr.length; i++) {//遍历数组，创建li标签，把数组的值放入li中
		var liObj = document.createElement("li");
		liObj.innerText = arr[i];
		ula.appendChild(liObj);
	}
	var timer = null;
	btu.onclick = function() {
		clearInterval(timer);
		timer = setInterval(function() {
			var i = Math.floor(Math.random() * arr.length);
			for (var j = 0; j < oLi.length; j++) {
				oLi[j].removeAttribute("class");
			}
			oLi[i].className = "change";
		}, 50);
	};
	btu1.onclick = function() {
		clearInterval(timer);
		var choise = document.getElementsByClassName("change")[0];
		var name = choise.innerText;
		var nameSpan = document.getElementsByClassName('name')[0];
		nameSpan.innerText = name;
	}
</script>

效果图

点击后的效果图