编程 Javascript

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

Posted in Javascript onMarch 09, 2017

1. 效果：

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

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实现课堂随机点名和顺序点名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

北斗星先森

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

原生JS实现表单checkbook获取已选择的值

Jul 21 Javascript

js动态创建标签示例代码

Jun 09 Javascript

JavaScript中的Math.atan2()方法使用详解

Jun 15 Javascript

js实现获取div坐标的方法

Nov 16 Javascript

javascript数组去重小结

Mar 07 Javascript

Bootstrap表单布局样式源代码

Jul 04 Javascript

JavaScript仿网易选项卡制作代码

Oct 06 Javascript

Vue监听数据对象变化源码

Mar 09 Javascript

原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

Sep 10 Javascript

vue2.0 下拉框默认标题设置方法

Aug 22 Javascript

VUE兄弟组件传值操作实例分析

Oct 26 Javascript

基于aotu.js实现微信自动添加通讯录中的联系人功能

May 28 Javascript

JavaScript实现两个select下拉框选项左移右移

Mar 09 #Javascript

js实现年月日表单三级联动

Apr 17 #Javascript

js实现3D图片展示效果

Mar 09 #Javascript

JavaScript实现左右下拉框动态增删示例

Mar 09 #Javascript

less简单入门(CSS 预处理语言)

Mar 08 #Javascript

完美实现js选项卡切换效果(二)

Mar 08 #Javascript

微信小程序中用WebStorm使用LESS

Mar 08 #Javascript