js随机点名

主页 M

js随机点名

2014-04-26 网页编程网 网页编程网

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点名系统</title>
<style type="text/css">
   .tit{ width:551px; font-weight:bold; }
   .tit span{ float:right; }
   .status{ width:551px; text-align:center; clear: both;margin-top: 10px;}
   #c_name{ color:blue; font-size: 20pt;font-weight:bold;}
   #list{ width:1505px; border:3px solid #FF3300; background-color:#FBFCEB; margin:0; list-style:none; padding:20px; }
   #list li{ width:150px; height:100px; line-height:130px; text-align:center; font-size:22px; font-weight:bold; color:#FF3300; float:left; border:1px dashed red; margin:5px; }
   #list li.selected{ background-color:#FFCC33; border:1px solid red; color:#FFFFFF; }
   #list li.unselected{ background-color:#FBFCEB; }
   .btn{ width:120px; height:30px; border:1px solid #FF3300; background-color:#FBFCEB; color:#FF3300; font-size:16px; font-weight:bold; }
</style>
</head>
<body>
<p class="tit"><span id="c_name"></span></p>
<ul id="list">
</ul>

<p class="status">
  <input type="button" id="create" class="btn" value=" 生成 " onclick="add();" />
<input type="button" id="btn1" class="btn" value=" 开始(space) " onclick="begin();" />
<input type="button" id="btn2" class="btn" value=" 停止(enter) " onclick="quit();" disabled="disabled" />
</p>

<script type="text/javascript">
  var tt,a;
  var obj = document.getElementsByTagName("LI");
  var n_list = ["张瑶","周梦林","丁浩方","张梦琳","孙飞","程汝冰","任思远","孙梅","丁凯伟","崔杨","杨光斌","苏晓龙","吴银娜","朱俊龙","王心","孙臣微","王兰英","杨硕","丁昊","陈英俊","杜田鹏","张蕊","郑晓敏","程林","孙鹏飞","王浩","孟令浩","郭朝","王雅绵","万亚珠","朱艳","李怡慧","王子傲","刘堃阳","刘妲","罗广宇","王保健","鞠恒阔"];

function setValue(){  //给选中的方块设置背景色等效果
    var n=n_list.length;
     a = Math.floor(Math.random()*n);  //产生1-32之间的随机数
     
  	 for(var i=0;i<n;i++){
  	  obj[i].className = "unselected";   //将所有背景选中的都清空
  	   obj[a].className = "selected";    //重新设置当前选中的内容的背景颜色
  	   obj[a].title = n_list[a];   //设置提示效果
    }//for
  }
  function begin(){  //开始执行调用函数
     tt = window.setInterval(setValue,50);   //定时调用函数
	 $("btn1").disabled = true;     //设置“开始”按钮不可用
	 $("btn2").disabled = !$("btn2").disabled;
  }
  
  function quit(){  //停止调用函数
     window.clearInterval(tt);
	 $("c_name").innerText = "选中：[" + n_list[a] + "]";   //显示当前选中的同学的名字
	 $("btn1").disabled = !$("btn1").disabled;
	 $("btn2").disabled = !$("btn2").disabled;
    playAudio();
  }
  
  function $(name){//转换指定ID名称的html标签为js对象
     return document.getElementById(name);
  }
  /**
  动态增加li
  */
  function add(){
    var s=document.getElementById('list');
    var t=s.childNodes.length;
    var li= document.createElement("li");
    var n=n_list.length;
    for(var i=0;i<n;i++){
       s.innerHTML+='<li>'+(i+1)+'.'+n_list[i]+'</li>';
    }//for
 }//add
</script>
<ul id="mark"></ul>
</body>
</html>

阅读原文

阅读 4138

123 显示电脑版