js+html实现点名系统功能


Posted in Javascript onNovember 05, 2019

本文实例为大家分享了js+html实现点名系统功能的具体代码,供大家参考,具体内容如下

前言:实现一个简单的点名系统

需求分析:

1、两个按钮实现随机点名的开始和结束(onclick()方法)
2、每一个名字需要放在一个单独的盒子中并被一个div所包裹,以便于统一格式(动态生成div)
3、当随机开始时,随机选取一条数据,并将该条数据所在的div背景颜色更改(random()函数获得随机数,setTimeout()重复调用)
4、随机结束时将当前的数据显示出来(alert())

下面开始实现

1.准备数据并编写HTML页面

将所有的数据放在一个数组中,便于后面根据角标随机选取数据

<button οnclick="startF2()">开始</button>
<button οnclick="endF2()">结束</button>
<div id="fa">
 
</div>
//JS中准备数据
//准备数据
var arr = ["1", "2", "3", "4", "5", "6"];
var index = -1; //标记被选中的块的id,下一次循环时将该块的背景改为原来的颜色
var time;

2.在页面加载时动态得将数据放在div中展示出来

需要用到onload()方法在页面加载时同时调用初始化数据的方法

function init() {
 //将数组显示在页面上
 for(var i = 0; i < arr.length; i++) {
 //获取父容器
 var fa = document.getElementById("fa");
 //创建小div
 var div = document.createElement("div");
 //设置id属性,方便寻找
 div.id = "id" + i;
 div.className = "box"; //方便给小div设置样式
 //设置小div中显示的内容
 div.innerHTML = arr[i];
 //将小div放在父容器中
 fa.appendChild(div);
 }
 
}

此时页面上应该可以将数据全部显示出来

3.编写点击按钮时触发的开始随机和结束随机的方法

开始随机方法

function nowfind() { 
 if(index != -1) {
 //将上一个选中的div的背景还原
 document.getElementById("id" + index).style.backgroundColor = "gray";
 }
 //随机数
 var num = Math.floor(Math.random() * arr.length);
 index = num; //记录被选中的div的id
 //获取对应的div
 var div = document.getElementById("id" + num);
 //设置背景颜色
 div.style.backgroundColor = "pink";
}
 
function startF2() {
 //调用计时器重复调用nowfind方法
 time = setInterval("nowfind()",100);//赋值给变量以便于关闭调用
}

nowfind()方法是实现一次随机获取,startF2()方法是利用setInterval()方法周期性得调用nowfind()方法

nowfind()中进行下一次循环的时候必须要将上一次选取的数据所在的div背景改变回来,否则最终会变成同一色.并且随机数的选取应该采用floor()方法向下取整

结束随机方法

function endF2() {
 //停止随机获取姓名
 clearInterval(time);
 alert("请"+arr[index]+"同学回答问题");
}

结束时将数据输出即可

点名系统实现.

效果如下:

随机前:

js+html实现点名系统功能

随机中:

js+html实现点名系统功能

随机结束:

js+html实现点名系统功能

完整代码如下:

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
  //准备数据
  var arr = ["1", "2", "3", "4", "5", "6"];
  var index = -1; //标记被选中的块的id,下一次循环时将该块的背景改为原来的颜色
  var time;
  function nowfind() {
 
  if(index != -1) {
   //将上一个选中的div的背景还原
   document.getElementById("id" + index).style.backgroundColor = "gray";
  }
  //随机数
  var num = Math.floor(Math.random() * arr.length);
  index = num; //记录被选中的div的id
  //获取对应的div
  var div = document.getElementById("id" + num);
  //设置背景颜色
  div.style.backgroundColor = "pink";
  }
 
  function startF2() {
  //调用计时器重复调用nowfind方法
  time = setInterval("nowfind()",100);//赋值给变量以便于关闭调用
  }
 
  function endF2() {
  //停止随机获取姓名
  clearInterval(time);
  alert("请"+arr[index]+"同学回答问题");
  }
 
  function init() {
  //将数组显示在页面上
  for(var i = 0; i < arr.length; i++) {
   //获取父容器
   var fa = document.getElementById("fa");
   //创建小div
   var div = document.createElement("div");
   //设置id属性,方便寻找
   div.id = "id" + i;
   div.className = "box"; //方便给小div设置样式
   //设置小div中显示的内容
   div.innerHTML = arr[i];
   //将小div放在父容器中
   fa.appendChild(div);
  }
 
  }
 </script>
 <style type="text/css">
  .box {
  width: 100px;
  height: 50px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  margin: 10px;
  float: left;
  }
 </style>
 </head>
 
 <body οnlοad="init()">
 <button οnclick="startF2()">开始</button>
 <button οnclick="endF2()">结束</button>
 <div id="fa">
 
 </div>
 </body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 #Javascript
在Vue mounted方法中使用data变量详解
Nov 05 #Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 #Javascript
vue input标签通用指令校验的实现
Nov 05 #Javascript
vue子传父关于.sync与$emit的实现
Nov 05 #Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 #Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 #Javascript
You might like
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP微信红包API接口
2015/12/05 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python实现学生管理系统
2018/01/11 Python
python opencv实现运动检测
2018/07/10 Python
python实现最小二乘法线性拟合
2019/07/19 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
安全生产投入制度
2014/01/29 职场文书
国庆节演讲稿
2014/05/27 职场文书
运动会横幅标语
2014/06/17 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
文艺演出主持词
2015/07/01 职场文书
2016特色励志班级口号
2015/12/24 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers