1. 效果：
ScreenGif.gif
2. Html代碼：
<body>
<form>
<div align="center">
<input type="button" value="開始點名" onclick="students()" class="ks"/>
<input type="button" value="停止點名" onclick="stop()" class="ks" id="nu"/>
<hr color="blue">
<br>
<div id="div1" align="center">隨機點名區(qū)域</div>
</div>
</form>
</body>
3. JavaScript代碼：
<script type="text/javascript">
var i = 0;
//t用來接收setTimeOut()的返回值
var t;
var st = ['張三','李四', '老王','旺財','鐵柱', '王八','來福','小明','小紅','狗蛋','SB.Child'];
var u;
//點名函數(shù)
function students()
{
//順序點名
/* if (i < st.length)
{
u = st[i];
}
else
{
//點到最后一個就回來重新點起
i = 0;
u = st[i];
}
i = i + 1;
*/
//隨機點名 產(chǎn)生0-數(shù)組長度之間的數(shù)作為數(shù)組下標
var num = Math.floor(Math.random()*st.length);
u = st[num];
//更改文本框顯示的value值
document.getElementById("div1").innerHTML = u ;
t = setTimeout("students()", 1000);
}
//停止點名函數(shù)
function stop()
{
clearTimeout(t);
}
</script>
4. CSS代碼：
<style type="text/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;
}
</style>
