php随机点名代码怎么做,js实现课堂随机点名系统

本文实例为大家分享了js随机点名系统的具体代码，供大家参考，具体内容如下

style样式

.cor {

background-color: #6083cd;

}

#box {

width: 500px;

border: 2px solid black;

margin: 0 auto;

height: 500px;

}

ul {

list-style: none;

}

li {

width: 50px;

height: 50px;

margin: 20px;

float: left;

line-height: 50px;

text-align: center;

}

.center {

width: 156px;

height: 40px;

line-height: 40px;

margin: 0 auto;

}

#pp {

display: block;

text-align: center;

margin-top: 40px;

font-size: 35px;

}

body排列

点名系统

js代码

function my$(id){

return document.getElementById(id);

}

//定义数组，存放数值

var arr = ["卓子贤","梁图","袁绍思","张家磊","梁文龙","方志豪","曾勇强","陈文"];

//先创建一个ul加入到名字为dv的div中

var oul = document.createElement("ul");

my$("dv").appendChild(oul);

//接下来遍历arr数组，动态创建li元素并且加入到ul中，并且把数组变量动态写到li中

for(var i=0;i

oli = document.createElement("li");

oul.appendChild(oli);

oli.innerHTML = arr[i];

}

//先获取到所有的li，为下面的应用css样式做铺垫

var oli = oul.getElementsByTagName("li");

var timer;//这里先定义一个变量，开启定时器再赋值，

//为鼠标注册点击事件

my$("btn").οnclick=function (){

clearInterval(timer);//在开启定时器之前先清除定时器，避免出现用户多次点击开启多个定时器而关不掉。

//开启定时器并赋值给变量

timer = setInterval(function (){

var num = parseInt(Math.random()*arr.length);

console.log(num);

//这里遍历所有的li元素，在开启定时器之前先把所有的li的样式清除掉

//如果这里不清除，那么所有的li在下一步都会全部应用上css样式，

//全部都会高亮显示,无法实现排他效果

for(var i=0;i

oli[i].className = "";

}

oli[num].className = "cor";

//将生成的随机数动态显示到span中，将最后所选择的数组名显示到span中

my$("pp").innerHTML = arr[num];

//console.log(arr[num]);

},100);

}

//停止点名按钮。

my$("btn2").οnclick=function (){

clearInterval(timer);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持谷谷点程序。