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

网页版点名

实现的步骤：

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>

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

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

【JAVA】网页版登录注册系统2.0
前言 JAVA实现网页的登录与注册2.0版一.环境的搭建导入1.0版本的项目Java实现网页版登录注册系统-Java文档类资源-CSDN文库可参考[JAVA]网页版登录注册系统_Lx_Hy_的博客 ...
【JAVA】网页版登录注册系统
目录前言一.环境的搭建二.功能实现 1.登录功能 2.注册功能 [注意] 总结前言 JAVA实现网页的登录与注册一.环境的搭建 1.创建Maven Web工程,参考[JAVA]Web服务器- ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[' ...
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...

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

网页版点名

搭建环境

编写css将想呈现的效果编辑出来：

编写JS代码实现逻辑

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

最新文章

热门文章