班级随机点名html,班级座位随机点名效果

HtmlCssJs

班级班级

哈哈

哈哈

哈哈

哈哈

哈哈

哈哈

哈哈

哈哈

呵呵

呵呵

呵呵

呵呵

呵呵

呵呵

呵呵

呵呵

呵呵

嘿嘿

嘿嘿

嘿嘿

嘿嘿

哼哼

哼哼

哼哼

哼哼

哼哼

哼哼

哼哼

哼哼

哼哼

呸呸

呸呸

呸呸

呸呸

呸呸

呸呸

呸呸

呸呸

呸呸

唧唧

唧唧

唧唧

唧唧

唧唧

唧唧

唧唧

唧唧

body {

background-repeat:no-repeat;

}

#big {

width:1300px;

margin:50px 50px;

position:relative;

}

table {

height:400px;

background-color:rgba(255,192,203,.5);

border:2px solid #333333;

padding:10px;

border-collapse:collapse;

border-spacing:0;

font-size:20px;

font-weight:bold;

}

table td {

width:100px;

border:1px solid #333333;

text-align:center;

}

input {

width:120px;

height:60px;

background-color:rgba(135,206,250,.5);

font-size:14px;

border-radius:25px;

}

#only {

position:absolute;

right:140px;

top:100px;

}

#stop1 {

position:absolute;

right:10px;

top:100px;

}

#boy {

position:absolute;

right:140px;

top:200px;

}

#stop2 {

position:absolute;

right:10px;

top:200px;

}

#girl {

position:absolute;

right:140px;

top:300px;

}

#stop3 {

position:absolute;

right:10px;

top:300px;

}

#group {

position:absolute;

right:140px;

top:400px;

}

#stop4 {

position:absolute;

right:10px;

top:400px;

}

function zy$(id) {

return document.getElementById(id)

};

//一个

var tdO = zy$("all").getElementsByClassName("name");

//循环遍历每个td

for (var i = 0; i < tdO.length; i++) {

//注册点击事件，添加事件处理函数

var timeId1 = "";

zy$("only").onclick = function() {

clearInterval(timeId1);

timeId1 = setInterval(function() {

//刷一遍

for (var j = 0; j < tdO.length; j++) {

tdO[j].style.backgroundColor = "rgba(255,192,203,.5)";

}

//产生随机数

var result1 = parseInt(Math.random() * tdO.length);

tdO[result1].style.backgroundColor = "yellow";

zy$("stop1").onclick = function() {

clearInterval(timeId1);

}

}, 200)

};

}

//男生

var tdbO = document.getElementsByClassName("boy");

//循环遍历每个td

for (var i = 0; i < tdbO.length; i++) {

//注册点击事件，添加事件处理函数

var timeId2 = "";

zy$("boy").onclick = function() {

clearInterval(timeId2);

timeId2 = setInterval(function() {

//刷一遍

for (var j = 0; j < tdbO.length; j++) {

tdbO[j].style.backgroundColor = "rgba(255,192,203,.5)";

}

//产生随机数

var result1 = parseInt(Math.random() * tdbO.length);

tdbO[result1].style.backgroundColor = "yellow";

zy$("stop2").onclick = function() {

clearInterval(timeId2);

}

}, 200)

};

}

//女生

var tdgO = document.getElementsByClassName("girl");

//循环遍历每个td

for (var i = 0; i < tdgO.length; i++) {

//注册点击事件，添加事件处理函数

var timeId3 = "";

zy$("girl").onclick = function() {

clearInterval(timeId3);

timeId3 = setInterval(function() {

//刷一遍

for (var j = 0; j < tdgO.length; j++) {

tdgO[j].style.backgroundColor = "rgba(255,192,203,.5)";

}

//产生随机数

var result1 = parseInt(Math.random() * tdgO.length);

tdgO[result1].style.backgroundColor = "yellow";

zy$("stop3").onclick = function() {

clearInterval(timeId3);

}

}, 200)

};

}

//一组

var trO = zy$("all").getElementsByTagName("tr");

//循环遍历每个tr

for (var i = 0; i < trO.length; i++) {

trO[i].setAttribute("index2", i);

var timeId4 = "";

//注册点击事件，添加事件处理函数

zy$("group").onclick = function() {

clearInterval(timeId4)

timeId4 = setInterval(function() {

for (var j = 0; j < trO.length; j++) {

trO[j].style.backgroundColor = "rgba(255,192,203,.5)";

}

var result2 = parseInt(Math.random() * trO.length);

trO[result2].style.backgroundColor = "yellow";

zy$("stop4").onclick = function() {

clearInterval(timeId4);

}

}, 200)

};

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3