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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
python编写爬虫小程序
2015/05/14 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
数控专业应届生求职信
2013/11/27 职场文书
初婚初育证明
2014/01/14 职场文书
仓管员岗位责任制
2014/02/19 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
医疗纠纷协议书
2014/04/16 职场文书
父亲节活动策划方案
2014/08/24 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技