朋友曾跟我提過隨機(jī)點名的需求，想要跑馬燈效果，順手寫了一下.純原生js寫法
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tabs td{
width: 100px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<button id="btn">Go!</button>
<script>
//定義名字?jǐn)?shù)組
var arrName =['小明','小花','小青',
'小蘭','小綠','小芳','小紫','小里','小張',
'小王','小黑','小白','小玲','小賈','小鄭','小狗'
,'小三','小四','小酒','小樣','小楊','小木','曉曉'];
//表格常量
var tabW =5;
var tabH =5;
//搭建隨機(jī)函數(shù)
var MathRond =function(arr){
return Math.floor(Math.random()*arr.length);
}
//搭建表格函數(shù)
var MyTab =function(tabWidth,tabHeight){
var oTab =document.createElement("table");
oTab.setAttribute('border','1');
oTab.setAttribute('id','tabs');
for(var i =0;i<tabHeight;i++){
var aTr =document.createElement("tr");
oTab.appendChild(aTr);
for(var j =0;j<tabWidth;j++){
var aTd =document.createElement("td");
oTab.getElementsByTagName("tr")[i].appendChild(aTd);
}
}
document.body.appendChild(oTab);
}
MyTab(tabW,tabH);
//把名字放表格里
function tabPreson(arr){
var oTab =document.getElementById("tabs");
for(var i =0;i<arr.length;i++){
oTab.getElementsByTagName("td")[i].innerHTML=arr[i];
oTab.getElementsByTagName("td")[i].style.backgroundColor='';
oTab.getElementsByTagName("td")[i].style.color='red';
}
oTab.getElementsByTagName("td")[MathRond(arr)].style.backgroundColor=getColor();
// oTab.getElementsByTagName("td")[MathRond(arr)].style.color='#fff';
}
//啟動前先調(diào)用 ===
//跑馬燈效果 =====修改版，隨時停止跑馬燈效果。
var paoma =true;
var timeId =null;
function paoMa(){
if(paoma){
timeId =setInterval(function(){
tabPreson(arrName);
},20);
paoma=false;
}else{
clearInterval(timeId);
paoma=true;
}
}
//隨機(jī)顏色抽取
var getColor =function(){
var nums ='0123456789abcdef';
var str='#';
for(var i =0;i<6;i++){
str+=nums[MathRond(nums)]
}
return str;
}
var oBtn =document.getElementById("btn");
//點擊開始點名
oBtn.onclick=function(){
paoMa();
}
</script>
</body>
</html>
