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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
js实现漫天星星效果
Jan 19 Javascript
原生js实现弹出层效果
Jan 20 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
input按钮的事件处理大全
2010/12/10 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js读取cookie方法总结
2014/10/31 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js实现计算器功能
2020/08/10 Javascript
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python简单实例训练(21~30)
2017/11/15 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
物流经理自我评价
2013/09/23 职场文书
职工运动会感言
2014/02/07 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技