网页版点名
实现的步骤：
1.搭建环境
2. 编写HTML和CSS代码把网页效果先写出来
3. 编写JS代码实现逻辑
4. 测试点名系统
搭建环境
创建一个HTML文件，导入JQuery文件，如下图：
编写css将想呈现的效果编辑出来：
<style type="text/css">body{background-color: rgba(255, 217, 0, 0.39);}.box {width: 100px;height: 50px;background-color: gray;text-align: center;line-height: 50px;margin: 10px;float: left;}#but{text-align: center; }#fa{height: 300px;}.btn{width: 100px;height: 50px;}</style><body><h1 align="center">点名系统</h1><div id="fa" align="center"></div><div id="but" align="center"><button class="btn" οnclick="start()">开始</button><button class="btn" οnclick="end()">结束</button></div></body>
我这里的效果是这样的：
自己可以根据喜好来改。
编写JS代码实现逻辑
在每个div标签中添加自己的名单，然后将标签添加到父标签中，我这里是使用的循环来实现：var arr = ["肖绍霆","文鑫","向贞好","胥员员"]var index = -1; var time; //开始和结束的时钟变量function init() {//将数组显示在页面上for(var i = 0; i < arr.length; i++) {//获取父容器var fa = document.getElementById("fa");//创建小divvar div = document.createElement("div");//设置id属性,方便寻找div.id = "id" + i;div.className = "box"; //方便给小div设置样式//设置小div中显示的内容div.innerHTML = arr[i];//将小div放在父容器中fa.appendChild(div);}}
编写开始和结束按钮的点击事件：
开始按钮的点击事件：
function start() {//调用计时器重复调用nowfind方法time = setInterval("nowfind()",100);//赋值给变量以便于关闭调用}
结束按钮的点击事件：
function end() {//停止随机获取姓名clearInterval(time);// alert("请"+arr[index]+"同学回答问题");}
随机点名逻辑代码的实现：
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//获取对应的divvar div = document.getElementById("id" + num);//设置背景颜色div.style.backgroundColor = "pink";}
测试结果：
这是整个网页的代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.3.1.min.js"></script><script type="text/javascript">//准备数据var arr = ["肖绍霆","文鑫","向贞好","胥员员","李勇","熊明","杜凯","熊国良","付帅","龚文曦","吴世林","李鹏","宋小明","黄海","曾光鹏","墙世川","幸勇","彭清亮","杨崇鑫","王一舟","汪家鹏","高茂鑫","张松恒","杨海峰","付杨恒","唐浩翔","张攀","王震","蒋朋利","邱东","杜林","杨玺","杜江","李维","颜森","陈毫","王伟","张炼","李璞","孙钰濠","管南昆"];var index = -1; 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//获取对应的divvar div = document.getElementById("id" + num);//设置背景颜色div.style.backgroundColor = "pink";}function start() {//调用计时器重复调用nowfind方法time = setInterval("nowfind()",100);//赋值给变量以便于关闭调用}function end() {//停止随机获取姓名clearInterval(time);// alert("请"+arr[index]+"同学回答问题");}function init() {//将数组显示在页面上for(var i = 0; i < arr.length; i++) {//获取父容器var fa = document.getElementById("fa");//创建小divvar div = document.createElement("div");//设置id属性,方便寻找div.id = "id" + i;div.className = "box"; //方便给小div设置样式//设置小div中显示的内容div.innerHTML = arr[i];//将小div放在父容器中fa.appendChild(div);}}$(function(){init();});</script><style type="text/css">body{background-color: rgba(255, 217, 0, 0.39);}.box {width: 100px;height: 50px;background-color: gray;text-align: center;line-height: 50px;margin: 10px;float: left;}#but{text-align: center; }#fa{height: 300px;}.btn{width: 100px;height: 50px;}</style></head><body><h1 align="center">点名系统</h1><div id="fa" align="center"></div><div id="but" align="center"><button class="btn" onclick="start()">开始</button><button class="btn" onclick="end()">结束</button></div></body></html>
以上就是本次介绍，如果有不恰当的地方，欢迎指正。
