AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

JS实现课堂随机点名和顺序点名

51自学网 http://www.wanshiok.com
js实现随机点名,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实现课堂随机点名和顺序点名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对wanshiok.com网站的支持!


js实现随机点名,js实现顺序点名  
上一篇:jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】  下一篇:JavaScript实现两个select下拉框选项左移右移