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数独游戏解析(一)-页面布局
Nov 05 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
人民调解员培训方案
2014/06/05 职场文书
委托证明范本
2014/11/25 职场文书
中班下学期个人总结
2015/02/12 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
转正申请报告格式
2015/05/15 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
2015年国庆节寄语
2015/08/17 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书