介绍 & lt; button οnclick=皊tartF2()“在开始& lt;/button>
& lt; button οnclick=癳ndF2()“在结束& lt;/button>
& lt; div id=癴a"祝辞
,
& lt;/div> //js中准备数据//准备数据
var arr =, (“1“,,, 2,,,, 3,,,“4”,,“5”,,,“6“);
var index =, 1,,//标记被选中的块的id,下一次循环时将该块的背景改为原来的颜色
var 时间; function init (), {
,//将数组显示在页面上
,(var 小姐:=,0;,小姐:& lt;, arr.length;,我+ +),{
,//获取父容器
,var fa =, . getelementbyid (“fa");
,//创建小div
,var div =, document.createElement (“div");
,//设置id属性,方便寻找=,div.id “id", +,我;=,div.className “box",,//方便给小div设置样式
,//设置小div中显示的内容=,,div.innerHTML arr[我];
,//将小div放在父容器中
,fa.appendChild (div);
,}
,
} function nowfind (), {,
,如果(index !=, 1), {
,//将上一个选中的div的背景还原
,. getelementbyid (“id", +,指数).style.backgroundColor =,“gray";
,}
,//随机数
,var num =, Math.floor (math . random (), *, arr.length);=,,index num;,//记录被选中的div的id
,//获取对应的div
,var div =, . getelementbyid (“id", +, num);
,//设置背景颜色=,div.style.backgroundColor “pink";
}
,
function startF2 (), {
,//调用计时器重复调用nowfind方法=,,time setInterval (“nowfind()“, 100);//赋值给变量以便于关闭调用
} function endF2 (), {
,//停止随机获取姓名
,clearInterval(时间);
,警报(“请“+ arr(指数)+“同学回答问题“);
} & lt; ! DOCTYPE html>
& lt; html>
,
,& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; script 类型=拔谋?javascript"比;//准才能备数据
var 才能;arr =, (“1“,,, 2,,,, 3,,,“4”,,“5”,,,“6“);
var 才能;index =, 1,,//标记被选中的块的id,下一次循环时将该块的背景改为原来的颜色
var 才能;时间;
function 才能;nowfind (), {
,
如果才能(index !=, 1), {
,,//将上一个选中的div的背景还原
,,. getelementbyid (“id", +,指数).style.backgroundColor =,“gray";
,,}//才能随机数
var 才能;num =, Math.floor (math . random (), *, arr.length);
index 才能=,num;,//记录被选中的div的id//才能获取对应的div
var 才能;div =, . getelementbyid (“id", +, num);//才能设置背景颜色
div.style.backgroundColor =,才能“pink";
,,}
,
function 才能;startF2 (), {//调才能用计时器重复调用nowfind方法
时间=time 才能;setInterval (“nowfind()“, 100);//赋值给变量以便于关闭调用
,,}
,
function 才能;endF2 (), {//才能停止随机获取姓名
clearInterval才能(时间);
警报才能(“请“+ arr(指数)+“同学回答问题“);
,,}
,
function 才能;init (), {//将才能数组显示在页面上
,,(var 小姐:=,0;,小姐:& lt;, arr.length;,我+ +),{
,,//获取父容器
,,var fa =, . getelementbyid (“fa");
,,//创建小div
,,var div =, document.createElement (“div");
,,//设置id属性,方便寻找
,,div.id =,“id", +,我;
,,div.className =,“box",,//方便给小div设置样式
,,//设置小div中显示的内容
,,div.innerHTML =, arr[我];
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个点名系统,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强> 1。准备数据并编写HTML页面
将所有的数据放在一个数组中,便于后面根据角标随机选取数据
2。在页面加载时动态得将数据放在div中展示出来
需要用到onload()方法在页面加载时同时调用初始化数据的方法
此时页面上应该可以将数据全部显示出来
3。编写点击按钮时触发的开始随机和结束随机的方法
开始随机方法
nowfind()方法是实现一次随机获取,startF2()方法是利用setInterval()方法周期性得调用nowfind()方法
nowfind()中进行下一次循环的时候必须要将上一次选取的数据所在的div背景改变回来,否则最终会变成同一色。并且随机数的选取应该采用地板()方法向下取整
结束随机方法
结束时将数据输出即可
点名系统实现。
效果如下:
随机前:
随机中:
随机结束:
完整代码如下:
