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

最新推荐文章于 2024-07-30 10:56:44 发布

落魄山上齐剑仙

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量3.3k

点赞数 6

文章标签： javascript html css

本文链接：https://blog.csdn.net/YINJOER/article/details/106947045

版权

网页版点名

实现的步骤：

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

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

落魄山上齐剑仙

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
网页版简单点名系统的实现（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); } .bo
复制链接

扫一扫