八十六

**

随机点名系统

**
css样式
.name{
width: 120px;
height: 50px;
float: left;
background-color: pink;
margin-left: 10px;
margin-top: 10px;
line-height: 50px;
text-align: center;
}
#username{
width: 800px;
height: 300px;
}

html页面
	<center>
		<h1>点名系统</h1>
		<div id="time"></div>
		<div id="username"></div>
		<input type="submit" id="btn" value="点名" />
	</center>
	**

javascript样式

**
window.onload = function(){
setInterval(“timer()”,1000);

var name= ["李白 ", "小乔 ", "刘备 ", "大桥 ", "孙尚香 ", 
"妲己 ", "震天锤 ", "震雷削", "钟馗 ",  "后裔","兰陵王"];
var time = document.getElementById('time');
var username = document.getElementById('username');
var btn = document.getElementById('btn');
// 循环显示数组人名
for(var i = 0;i < name.length;i++){
	// 创建一个div用来存放姓名，并把div放入username中
	var div = document.createElement('div');
	div.innerHTML = name[i];
	div.className = 'name';
	username.appendChild(div);
}

var a ,b=null;
btn.onclick = function(){
	if(this.value === "点名"){
		if(b != null){
		删除上一次选择的div并从页面和数组中删除
		username.removeChild(username.children[b]);
		name.splice(b,1);
		}
		a = setInterval(function(){
		//  清空所有姓名的背景颜色
		for(var i = 0;i < name.length;i++){
			username.children[i].style.backgroundColor = "";
		}
		var random = parseInt(Math.random()*name.length);
		username.children[random].style.backgroundColor = "red";
		b = random;	// 将随机数取出，用于再次点击后删除
	},100);
		this.value = "停止";
	}else{
		clearInterval(a);
		this.value = "点名";
	}
}

}

function timer(){
var time = document.getElementById(‘time’);
time.innerHTML = new Date().toLocaleString();
}