脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现随机点名

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

 更新时间：2017年03月09日 08:47:08   作者：北斗星先森  
这篇文章主要介绍了基于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实现课堂随机点名和顺序点名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • javascript常用的方法分享

    javascript常用的方法分享

    本文给大家分享了几个javascript中常用的方法，十分的实用，也很简单，有需要的小伙伴可以参考下。
    2015-07-07
  • 推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)

    推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)

    这篇文章主要介绍了推荐阅读的js快速判断IE浏览器(兼容IE10与IE11),因为ie11取消了很多低版本的判断，很多js都需要修改了，这里简单介绍下需要的朋友可以参考下
    2015-12-12
  • JS中常见的8种继承方法总结

    JS中常见的8种继承方法总结

    这篇文章主要给大家介绍了关于JS中常见的8种继承方法,在js中所有的引用类型都继承了Object,而继承也是通过原型链实现的,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • hash特点、hashchange事件介绍及其常见应用场景

    hash特点、hashchange事件介绍及其常见应用场景

    浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）,hashchange和popstate事件触发条件
    2023-11-11
  • JavaScript仿小米官网注册登录功能的实现

    JavaScript仿小米官网注册登录功能的实现

    这篇文章主要为大家详细介绍了如何通过JavaScript实现仿小米官网登录注册完整功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 微信小程序flex-grow无效的解决方案

    微信小程序flex-grow无效的解决方案

    在微信小程序中使用 Flexbox 布局时,如果遇到 flex-grow 属性无效的情况,可能是由几个不同的原因导致的,以下是一些可能的原因和解决方案,感兴趣的朋友一起看看吧
    2024-08-08
  • JS中的三个循环小结

    JS中的三个循环小结

    这篇文章主要介绍了JS中的三个循环小结,需要的朋友可以参考下
    2017-06-06
  • ES6的新特性概览

    ES6的新特性概览

    Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前，他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为，ES6的新特性将极大地改变JavaScript的编写方式
    2016-03-03
  • iframe的onload在Chrome/Opera中执行两次Bug的解决方法

    iframe的onload在Chrome/Opera中执行两次Bug的解决方法

    创建iframe对象，添加load事件， 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。
    2011-03-03
  • JS中强制类型转换的实现

    JS中强制类型转换的实现

    JavaScript中有几种强制类型转换的方法，可以将一个数据类型转换为另一个数据类型，具有一定的参考价值，感兴趣的可以了解一下
    2023-05-05

最新评论