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

Javascript 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
You might like
thinkphp实现图片上传功能
2016/01/13 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python利用线程实现多任务
2020/09/18 Python
详解python中的异常和文件读写
2021/01/03 Python
行政文秘岗位职责范本
2014/02/10 职场文书
大学生就业求职信
2014/06/12 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
百万英镑观后感
2015/06/09 职场文书
给朋友的赠语
2015/06/23 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python