添加与新增一些小玩意的1.0.3版本：传送门

各位带哥，这不是你们要的c++、java、c#作业哈

课上要求做个小作业，学生管理考勤系统，原本想着是个练手的好机会，结果只证实了我还是个弟中弟。

设想的功能只写了1/3左右，其余的大多数由于技术未涉及/基础不扎实（闭包问题，其实正好高程三才开始读到闭包）等被删了

原本设想的功能里包括点击“结束考勤”按钮后能把没有变色的按钮的名字收集起来，结果卡死在闭包问题上了。

暂且先上传这一版本，有个想法是等以后学的更深更深一些把这个开发成一个真正的，有后台、有数据库的考勤系统。

我这个专业真的诡异，要学数据库、Delphi和面向对象程序设计，但是java啊c啊还有组成原理数据结构却不教...

代码缩进和排版非常丑陋，但是急于实现暂且先不管，而且真的怕整理一下又哪里冒出问题.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
　　　　　　@font-face{
　　　　　　font-family: "方正颜宋简体";
　　　　　　src: url("方正颜宋简体.ttf");
　　　　　　}
        *{

            margin: 0;

            padding: 0;

        }

        body,html{

            width: 100%;

            height: 100%;

        }

        body{

            background-image: url("img/jhk-1549033898060.jpg");

            background-size: 120%;

            background-position: 50% 50%;

            background-repeat: no-repeat;

            font-family: "方正颜宋简体";

            background-attachment: fixed;

            height:90%;

        }

        .imfor{

            width: 100%;

            height: 20%;

        }

        .systemimfo{

            text-align: center;

            font-size: 53px;

            margin-top: 10px;

        }

        .version{

            font-size: 18px;

        }

        .teacher{

            /* padding-left: 20%; */

            margin-top: 1%;

        }

        button.btn{

            margin-top: 3%;

            width: 220px;

            height: 45px;

            margin-right: 30px;

            font-size: 18px;

            margin-left: 2%;
　　　　　　　/*真的有毒，BootStrap把两个输入框并排之后没法调节中间距离...我再试试*/

        }

        .btngroup{

            position: relative;

            top:17%;

            left: 17%;

            width: 66%;

            height: 55%;

            /* border: 1px solid darkcyan; *//*我现在觉得写布局的时候先画框真的太好用了*/

            text-align: center;

            vertical-align: middle;

            padding-top: 2px;

            font-size: 21px;

            margin-bottom: 150px;

            /* float: left; */

            /* display: none; */把这行放回去，这里注释掉是方便调试

        }

        div.btngroup button{

            height: 16%;

            width: 19%;

            margin-top: 18px;

            color: aliceblue;

            border: 1px solid skyblue;

            background-color: rgb(52, 173, 238);

            border-radius: 10px;

        }

        div.btngroup button:hover{

            box-shadow: 3px 3px goldenrod;

        }

        .unattendance{

            position: absolute;

            top: 39%;

            left: 66%;

            width: 30%;

            height: 45%;

            border: 1px solid firebrick;

        }

        #end{

            background-color: red;

            height: 15%;

            color: antiquewhite;

            margin-top: 20px;

            border: 1px solid darkorange;

        }

        #end:hover{

            box-shadow: 1px 2px lightskyblue

        }

    </style>

</head>

<body>

    <div class = "imfor">

        <div class="systemimfo">

            <span>学生管理考勤系统</span>

            <span class="version"><b>Version:1.0.0</b></span>

        </div>

        <div class="classimfo" style="text-align:center;">

            <form class="bs-example bs-example-form teacher"  role="form">

                <div class="input-group input-group-lg" style="padding-left:19%;padding-right: 1%;">

                    <span class="input-group-addon" >授课教师：</span>

                    <input type="text" class="form-control" placeholder="输入授课教师姓名" style = "width: 40%; margin-right: 0;">

                    <span class="input-group-addon" style="margin-left: 15%;">授课班级：</span>

                    <input type="text" class="form-control" placeholder="输入授课班级" style = "width: 40%;margin-right: 0; float: left;" >

                </div>

            </form>

            <button type="button" class="btn btn-primary" id="start">确认信息并开始考勤</button>            <!-- <button type="button" class="btn btn-primary" >开始考勤</button> -->

        </div>

    </div>

    <div class = "btngroup">

        <button style="" onclick="change(this)">学生姓名</button><!--必须添加一个空的内联样式,如果用setProperty就不用--!>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <br>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <br>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <br>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <br>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <button style="" onclick="change(this)">学生姓名</button>

        <br>

        <!-- <input type="button" id="end" value="结束考勤并统计缺勤名单"> -->

    </div>

    <!-- <div class="unattendance">

        <div id="absent"></div>

        <button id="clear">清除当前记录</button>

    </div> -->

    <script defer>

        window.onload = function(){};

        var imfor = document.getElementsByTagName("input");

        var btngroup = document.getElementsByClassName("btngroup")[0];

        var btn = document.querySelectorAll(".btngroup button");

        var btn_style;

        // var temp = "";

        var stat = document.getElementById("end");

        var absent = document.getElementById("absent");

        var clear = document.getElementById("clear");

        // var temp = [];

        // console.log(btn);

        // console.log(btngroup);

        // console.log(imfor);

        function change(into){

            // var style = window.getComputedStyle(into);

            console.log(into);

            into.style = "background-color:orange;"

            // into.style.backgroundColor = "orange";

        }

　　　　　//本来用的是这个写法，但是估计又栽在了闭包问题上，于是只能换上面那种笨比写法

        //     for(let i = 0; i < btn.length;i++){

        //     btn_style = window.getComputedStyle(btn[i]);

        //     btn[i].onclick = function(){

        //         console.log("?");

        //         if(btn_style.backgroundColor == "rgb(52, 173, 238)"){

        //         // console.log(arguments[0]);

        //         btn[i].style.backgroundColor = "orange";

        //         }

        //     }

        // };

        //

        //

        //等搞定了闭包回来实现这个

        // for(let j = 0; j < btn.length; j++){

        //     btn_style = window.getComputedStyle(btn[j]);

        //     stat.onclick = function(){

        //         if(btn_style.backgroundColor == "orange"){

        //             temp += " ";

        //             temp += btn[j].innerHTML;

        //             console.log("1");

        //             }

        //         }

        //     };
// function cle(){

        //     absent.innerText = "";

        // }

        // stat.addEventListener("click",unattendance,false);

        // clear.addEventListener("click",cle,false);

        var teacherimfor = imfor[0];

        console.log(teacherimfor);

        var classimfo = imfor[1];

        var start_btn = document.getElementById("start");

        var confirmimfor = "";

        function confirme(){

            if(!(teacherimfor.value == "" || classimfo.value == "")){

                confirmimfor = "已确认，授课教师：" + teacherimfor.value + ", 授课班级：" + classimfo.value;

            alert(confirmimfor);

            btngroup.style.display = "block";

            }else{

                alert("请输入有效信息！");

            }

        }

        start_btn.addEventListener("click",confirme,false);

    </script>

</body>

</html>

写一个小demo过程中遇到的各种问题 学生管理考勤系统（网页模拟）的更多相关文章

  1. java线程间通信：一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...

  2. Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）

    Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer   Advanced Installer :Free for 30 da ...

  3. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  4. Python之小测试：用正则表达式写一个小爬虫用于保存贴吧里的所有图片

    很简单的两步: 1.获取网页源代码 2.利用正则表达式提取出图片地址 3.下载 #!/usr/bin/python #coding=utf8 import re # 正则表达式 import urll ...

  5. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  6. 无废话MVC入门教程二[第一个小Demo]

    mvc技术交流,欢迎加群: 本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 ...

  7. MVC入门教程二[第一个小Demo]（转载）

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...

  8. 从一个小demo开始，体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  9. 使用开源框架Sqlsugar结合mysql开发一个小demo

    一.Sqlsugar简介 1.性能上有很大优势 sqlsugar是性能最好的ORM之一,具有超越Dapper的性能 ,走的是EMIT够构中间语言动态编译到程序集,完成高性能的实体绑定,达到原生水平. ...

随机推荐

  1. DateGridView标题列头添加复选框

    第一:添加列标题时,添加两个空格——用于显示复选框: 第二:实现列标题添加复选框,代码如下: private void AddCheckeBoxToDGVHeader(DataGridView dgv ...

  2. 手机与PC的影音相互播放（DLNA/UPNP）

    DLNA:全称是DIGITAL LIVING NETWORK ALLIANCE(数字生活网络联盟), 旨在解决个人PC,消费电器,移动设备在内的无线网络和有线网络的互联互通,使得数字媒体和内容服务的无 ...

  3. 黄聪：wordpress如何携带cookie模拟浏览器访问网站

    $args = array( 'user-agent' => 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, li ...

  4. MySQL中int(M)和tinyint(M)数值类型中M值的意义

    在一开始接触MySQL数据库时,对于int(M)及tinyint(M)两者数值类型后面的M值理解是最多能够插入数据库中的值不能大于M: 后来工作后,也是一边学习一边使用,之后的理解是其中的M的意思是插 ...

  5. vagrant box保存路径修改

    add box的时候默认保存在C盘用户文件夹 C:\Users\xxx.vagrant.d,通过设置VAGRANT_HOME环境变量改变默认位置 WIN setx VAGRANT_HOME “X:/y ...

  6. VC的function类说明 -- 继续

    我在之前的随笔中介绍了function如何保存参数,如何实现调用相关知识.对于一个函数对象或者函数指针来说,应该很容易理解.不过对于如何在function中保存类的成员函数,这个还是值得一说的. 还是 ...

  7. 如何用MAT分析Android程序的内存泄露

    本文结合<Android开发艺术探索>书籍中的内存分析例子来讲解如何利用MAT工具来查找内存泄漏(以AndroidStudio开发工具为例). 1.下载MAT(Eclipse Memory ...

  8. (error) MOVED 5798 172.17.0.3:6379

    登录没有启动集群模式(即缺少了那个"-c"): redis-cli -c -h yourhost -p yourpost

  9. (转)C#读取MAC的几种方法

    原文地址:http://www.cnblogs.com/diulela/archive/2012/04/07/2436111.html 1 通过IPConfig命令读取MAC地址 ///<sum ...

  10. mysql sql中的一些问题，Null与空字符

    mysql中的空值,NULL,空字符 Mysql数据库是一个基于结构化数据的开源数据库.SQL语句是MySQL数据库中核心语言.不过在MySQL数据库中执行SQL语句,需要小心两个陷阱. 陷阱一:空值 ...