随机点名（原创）

Html

Css

班级班级
哈哈		哈哈	哈哈	哈哈	哈哈	哈哈	哈哈	哈哈
呵呵	呵呵	呵呵	呵呵	呵呵	呵呵	呵呵	呵呵	呵呵
					嘿嘿	嘿嘿	嘿嘿	嘿嘿
哼哼	哼哼	哼哼	哼哼	哼哼	哼哼	哼哼	哼哼	哼哼
呸呸	呸呸	呸呸	呸呸	呸呸	呸呸	呸呸	呸呸	呸呸
唧唧	唧唧	唧唧	唧唧	唧唧	唧唧	唧唧	唧唧

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

立即下载

随机点名（原创）

代码描述：实现随机点名系统

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yuebanzhou

相关代码

班级班级

随机点名（原创）

最新