怎么请求小程序直播_JS完成讲堂随机点名和顺序

2021-01-12 13:12

JS实现课堂随机点名和顺序点名       这篇文章主要介绍了基于JS实现课堂随机点名和顺序点名的相关资料，非常不错，具有参考借鉴价值，需要的朋友参考下

1. 效果：

2. Html代码：

 body 
 form 
 div align="center" 
 input type="button" value="开始点名" / 
 input type="button" value="停止点名" id="nu"/ 
 hr color="blue" 
 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实现课堂随机点名和顺序点名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！