爱站程序员基地网页版点名
实现的步骤：
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>
以上就是本次介绍，如果有不恰当的地方，欢迎指正。
