关闭

RandamName随机点名

77人阅读 评论(0) 收藏 举报

确定班级人数名字,随机点名代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个数组,存放需要点名的人。
var names = new Array("name1","name2","name3","name4","name5",
                    "name6","name7","name8","name9","name10",
                    "name11","name12","name13","name14","name15",
                    "name16","name17","name18","name19","name20",
                    "name21","name22","name23");

//定义一个全局变量times用来接受window.setTimeout方法
var times;

//首先先把所有的人的名字用button标签显示在页面上
function showName(){
var inHTML=" ";
var p = document.getElementById("p");
for(var i =0;i<names.length;i++){

//依次给每一个数组元素显示并且赋唯一id,以方便以后改变其状态
inHTML = inHTML+"<input type='button' id="+i+" value="+names[i]+">";
}

//把所有的元素显示在p之中
p.innerHTML=inHTML;
}

//定义一个开始方法,让元素随机赋上颜色,以确定是谁
function start(){

//定义x来产生一个随机数,确定是哪个id
var x = parseInt(Math.random()*names.length);
 

//给每一个元素都改变底色
for(var i=0;i<names.length;i++){
document.getElementById(i).style.backgroundColor="grey";

/如果产生的随机数和循环到的id相同,则把它的颜色改变

if(x==i){
document.getElementById(x).style.backgroundColor="red";
 }
}

//无限循环这个方法,让颜色一直变换(直接显示太简单)
times=window.setTimeout("start()",100);

//定义一个结束方法,最终的名字即为点到的名字
function end(){
window.clearTimeout(times);
}
</script>
</head>
<body>
<input type="button" value="显示名字" onclick="showName()" />
<input type="button" value="开始" onclick="start()" />
<input type="button" value="结束" onclick="end()" />
<p id = "p"></p>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:733次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条