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 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Vue.js用法详解
Nov 13 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 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同时支持GIF、png、JPEG
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
用python爬取租房网站信息的代码
2018/12/14 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
客户付款通知书
2015/04/23 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
python图像处理 PIL Image操作实例
2022/04/09 Python