您的位置：首页 > Web前端 > JQuery

网页版简单点名系统的实现（HTML5、CSS、JS、jQuery）

2020-06-26 04:33 1006 查看

网页版点名

实现的步骤：

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代码实现逻辑

  1. 在每个div标签中添加自己的名单，然后将标签添加到父标签中，我这里是使用的循环来实现：
var arr = ["肖绍霆","文鑫","向贞好","胥员员"]
var index = -1;
var time;  //开始和结束的时钟变量
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);
}
}
  1. 编写开始和结束按钮的点击事件：

开始按钮的点击事件：

function start() {
//调用计时器重复调用nowfind方法
time = setInterval("nowfind()",100);//赋值给变量以便于关闭调用
}

结束按钮的点击事件：

function end() {
//停止随机获取姓名
clearInterval(time);
// alert("请"+arr[index]+"同学回答问题");
}
  1. 随机点名逻辑代码的实现：
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";
}
  1. 测试结果：


这是整个网页的代码：

<!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
//获取对应的div
var 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");
//创建小div
var 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>

以上就是本次介绍，如果有不恰当的地方，欢迎指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航