html随机点名函数,利用JS实现课堂随机点名和顺序点名

1. 效果：

ScreenGif.gif

2. Html代码：

3. JavaScript代码：

var i = 0;

//t用来接收setTimeOut()的返回值

var t;

var st = ['张三','李四', '老王','旺财','铁柱', '王八','来福','小明','小红','狗蛋','SB.Child'];

var u;

//点名函数

function students()

{

//顺序点名

/* if (i < st.length)

{

u = st[i];

}

else

{

//点到最后一个就回来重新点起

i = 0;

u = st[i];

}

i = i + 1;

*/

//随机点名 产生0-数组长度之间的数作为数组下标

var num = Math.floor(Math.random()*st.length);

u = st[num];

//更改文本框显示的value值

document.getElementById("div1").innerHTML = u ;

t = setTimeout("students()", 1000);

}

//停止点名函数

function stop()

{

clearTimeout(t);

}

4. CSS代码：

body{

background: #f5faff;

}

.ks{

width: 140px;

line-height: 55px;

text-align: center;

font-weight: bold;

color: #fff;

text-shadow:2px 2px 2px #333;

border-radius: 5px;

margin:0 20px 20px 0;

position: relative;

overflow: hidden;

background-color: limegreen;

border:1px solid #d2a000;

box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;

}

#nu{

background-color: red;

}

#div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;

width: 60%;

height: 60%;

margin-bottom:20px;

}