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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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
PHP连接access数据库
2008/03/27 PHP
提高php编程效率技巧
2015/08/13 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
JsRender实用入门教程
2014/10/31 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
从零学Python之hello world
2014/05/21 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
五年级数学教学反思
2014/02/11 职场文书
我的求职择业计划书
2014/04/04 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
高中班主任心得体会
2016/01/07 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL