这篇文章主要介绍了JS如何实现课堂随机点名和顺序点名，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1. 效果：
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">随机点名区域</div> </div> </form> </body>
3. JavaScript代码：
<script type="text/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);
}
</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>感谢你能够认真阅读完这篇文章，希望小编分享的“JS如何实现课堂随机点名和顺序点名”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
