JS实现课堂随机点名和顺序点名
北斗星先森 人气:01. 效果:
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实现课堂随机点名和顺序点名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
加载全部内容