版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39998026/article/details/78361166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
width: 100px;
height: 100px;
text-align: center;
}
.tdg{
background-color: #F00C30;
color:#f00c30;
}
.tdk{
color:#f00c30;
}
.tdsj{
background-color: #ffffff;
color:#ffffff;
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<input type="button" value="随机抽取" onclick="myShow()">
<input type="button" value="打乱排序" onclick="myRandom()">
<br>
<input type="button" value="快速抽取" onclick="mySelect()">
<input type="button" value="停止抽取" onclick="myStop()">
</p>
<script type="text/javascript">
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
};
var students=["周元康","刘婷婷","彭丹","凌红伟","吕雷","曾靖","张艳","符幸","邓蔚","龙英杰","李文星","周建鹏","何礼波","李交胜","刘芳","张三"];
function myRandom(){
var sz = [];//用来装随机下标
while(sz.length!=students.length){
var index=parseInt(Math.random()*students.length);
if(!sz.contains(index)){//判断下标是否存在
sz.push(index);
}
}
var tds=document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].innerHTML=students[sz[i]];
tds[i].setAttribute('class',"tdg");
tds[i].onclick=function () {
this.setAttribute('class',"tdk");
}
}
}
myRandom();
function myShow(){
var index=parseInt(Math.random()*students.length);
var tds=document.getElementsByTagName('td');
if(tds[index].getAttribute('class')=='tdk'){
myShow();
}
tds[index].setAttribute('class',"tdk");
}
var b;
function mySelect(){
var a=-1;
var tds=document.getElementsByTagName('td');
if(b==undefined){
b=setInterval(function(){
for (var i = 0; i < students.length; i++) {
var className=tds[i].getAttribute('class');
if(className!='tdk'){
tds[i].setAttribute('class',"tdg");
}
}
a++;
if(tds[a%students.length].getAttribute('class')!='tdk'){
tds[a%students.length].setAttribute("class","tdsj");
}
},30);
}
}
function myStop(){
window.clearInterval(b);
b=undefined;
var tds=document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var className=tds[i].getAttribute('class');
if(className=='tdsj'){
tds[i].setAttribute('class',"tdk");
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
width: 100px;
height: 100px;
text-align: center;
}
.tdg{
background-color: #F00C30;
color:#f00c30;
}
.tdk{
color:#f00c30;
}
.tdsj{
background-color: #ffffff;
color:#ffffff;
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<input type="button" value="随机抽取" onclick="myShow()">
<input type="button" value="打乱排序" onclick="myRandom()">
<br>
<input type="button" value="快速抽取" onclick="mySelect()">
<input type="button" value="停止抽取" onclick="myStop()">
</p>
<script type="text/javascript">
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
};
var students=["周元康","刘婷婷","彭丹","凌红伟","吕雷","曾靖","张艳","符幸","邓蔚","龙英杰","李文星","周建鹏","何礼波","李交胜","刘芳","张三"];
function myRandom(){
var sz = [];//用来装随机下标
while(sz.length!=students.length){
var index=parseInt(Math.random()*students.length);
if(!sz.contains(index)){//判断下标是否存在
sz.push(index);
}
}
var tds=document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].innerHTML=students[sz[i]];
tds[i].setAttribute('class',"tdg");
tds[i].onclick=function () {
this.setAttribute('class',"tdk");
}
}
}
myRandom();
function myShow(){
var index=parseInt(Math.random()*students.length);
var tds=document.getElementsByTagName('td');
if(tds[index].getAttribute('class')=='tdk'){
myShow();
}
tds[index].setAttribute('class',"tdk");
}
var b;
function mySelect(){
var a=-1;
var tds=document.getElementsByTagName('td');
if(b==undefined){
b=setInterval(function(){
for (var i = 0; i < students.length; i++) {
var className=tds[i].getAttribute('class');
if(className!='tdk'){
tds[i].setAttribute('class',"tdg");
}
}
a++;
if(tds[a%students.length].getAttribute('class')!='tdk'){
tds[a%students.length].setAttribute("class","tdsj");
}
},30);
}
}
function myStop(){
window.clearInterval(b);
b=undefined;
var tds=document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var className=tds[i].getAttribute('class');
if(className=='tdsj'){
tds[i].setAttribute('class',"tdk");
}
}
}
</script>
</body>
</html>