技術棧：原生js，筆者小白一枚，還望大牛多多指教，下面我們來看具體的代碼實現：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: aliceblue;
}
.box{
width: 1000px;
height: 240px;
/*background-color: aqua;*/
margin: 0 auto;
margin-top: 100px;
clear: both;
}
#btn{
width: 100px;
height: 30px;
margin-left: 600px;
margin-top: 50px;
}
.name{
width: 100px;
height: 30px;
float: left;
background-color: antiquewhite;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
#span{
float: right;
position: relative;
top: 55px;
right: 185px;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>隨機點名系統</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<input type="button" id="btn" value="點名"/>
<script>
// 獲取id函數
function my$(id){
return document.getElementById(id)
};
// 模擬后台數據
var arr = ["吉帆","靜慧","嘉歆","金枝","王大媽","老王","劉疙瘩","楊偉",
"韓晁","靜涵","靜曼","晶晶","靚影","嘉寶","李靜","李志","李偉","家美"
,"金枝","靜恬","劉澤祥","靜和","晶靈","立超","嘉懿","王歡","王欣","郭琦"
,"嘉美","王琦","潔靜","小楊","佳思","吉玉","張煥","張賽","娟秀","菊月"
,"王晶","吉玟","王飛","皎潔","曾艷","王翠青"
];
// 動態創建層
for(var i =0;i<arr.length;i++){
var div = document.createElement("div");
div.innerText=arr[i];
div.className="name";
my$("box").appendChild(div);
};
// 點名
my$("btn").onclick=function(){
var peoples= arr.length;
// 監視按鈕的狀態
if(this.value==="點名"){
// 定時針
timeId=setInterval(function () {
// 清空所有層的顏色
for(var i =0;i<arr.length;i++){
my$("box").children[i].style.background=""
};
// 留下當前層的顏色
var random = parseInt(Math.random()*peoples);
my$("box").children[random].style.background="red";
},100);
this.value="停止";
}else{
// 清除計時器
clearInterval(timeId);
this.value="點名";
};
};
// 獲取時間的函數
getTime();
setInterval(getTime,1000)
function getTime(){
var day = new Date();
var year = day.getFullYear();//年
var month = day.getMonth()+1;//月
var dat = day.getDate();//日
var hour = day.getHours();//小時
var minitue = day.getMinutes();//分鍾
var second = day.getSeconds();//秒
month=month<10?"0"+month:month;
dat=dat<10?"0"+dat:dat;
hour=hour<10?"0"+hour:hour;
minitue=minitue<10?"0"+minitue:minitue;
second=second<10?"0"+second:second;
my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second
}
</script>
</body>
</html>
這里是利用了一個假數據來模擬后台數據，元素都是通過數據的個數創建的，所以在這里如果需要添加和刪除成員，只需對數據進行修改即可。