添加与新增一些小玩意的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. Azure 认知服务 (1) 概述

    <Windows Azure Platform 系列文章目录> 在笔者之前的文章中,介绍的都是Azure  Infrastructure-as-a-Service (IaaS) 和Plat ...

  2. Windows下利用TortoiseSVN搭建本地SVN服务器

    写在前面: 安装TortoiseSVN时,图中这步要选择,才能同时安装后面需要的svnserve.exe 环境说明: Win 7 TortoiseSVN 1.7 搭建步骤: 0. 新建一个目录,做&q ...

  3. Windowsx64位安装pymssql并完成与数据库链接

    常流程只需要打开下载并按照常规方法安装mssql包即可在程序中import pymssql,不过安装mssql确实有些小麻烦. 从开始安装就开始出现了各种异常错误 首先出现sqlfront.h文件找不 ...

  4. Java-Runoob-高级教程-实例-时间处理：04. Java 实例 - 时间戳转换成时间

    ylbtech-Java-Runoob-高级教程-实例-时间处理:04. Java 实例 - 时间戳转换成时间 1.返回顶部 1. Java 实例 - 时间戳转换成时间  Java 实例 以下实例演示 ...

  5. 【转】XP_cmdshell存储过程

    原文地址:http://www.cnblogs.com/love_study/archive/2010/03/02/1676583.html 一 .简介 xp_cmdshell 扩展存储过程将命令字符 ...

  6. Recyclerview 实现上拉加载更多

    LinearLayoutManager layoutManager; layoutManager = new LinearLayoutManager(getActivity()); layoutMan ...

  7. 2017湖湘杯复赛writeup

    2017湖湘杯复赛writeup 队伍名:China H.L.B 队伍同时在打 X-NUCA  和 湖湘杯的比赛,再加上周末周末周末啊,陪女朋友逛街吃饭看电影啊.所以精力有点分散,做出来部分题目,现在 ...

  8. Postgres安装

    yum install zlib-devel gcc make #创建用户和组groupadd postgresuseradd -g postgres postgres mkdir -p /usr/l ...

  9. Java开发各层对象专用名词含义 PO,VO,DAO,BO,DTO,POJO, BYO,Entity,JavaBean,JavaBeans

    Java的几种名词(PO,VO,DAO,BO,POJO)解释 PO:persistant object 持久对象.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一 ...

  10. 第7章 网络层协议（4）_IGMP协议

    4. IGMP协议(Internet Group Management Protocol) 4.1 什么是组播(多播) (1)单播同一个视频要发送90个副本,但支持收看者“快进”和“倒退”. (2)组 ...