学习笔记（JavaScript）含增删改查demo

雪茔

已于 2022-06-21 11:02:15 修改

阅读量455

点赞数

文章标签： javascript 正则表达式 ajax

于 2021-05-08 16:37:42 首次发布

本文链接：https://blog.csdn.net/qq_47105662/article/details/116130113

版权

基础知识

JavaScript参考手册（JS对象、Browser对象、Dom对象、HTML对象）：JavaScript参考手册
JavaScript 是可插入 HTML 页面的编程代码。例如JavaScript可以直接写入HTML输出流。

<p>JavaScript 能够直接写入HTML输出流中：</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

注意：只能在 HTML 输出中使用 document.write，如果在文档加载后使用该方法，会覆盖整个文档。

可以把JavaScript保存到外部文件中（外部文件不能包含script标签）。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在标签的 “src” 属性中设置该 .js 文件：

<script src="myScript.js"></script>//放在 body和 head之间皆可

声明提升：JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。 JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。但是，JavaScript 只有声明的变量会提升，初始化的不会。

break和continue

break 语句用于跳出循环。 break 语句（不带标签引用），只能用在循环或 switch 中。通过JavaScript标签引用，break 语句可用于跳出任何 JavaScript 代码块。

cars=["BMW","Volvo","Saab","Ford"];
list:
{
    document.write(cars[0] + "");
    document.write(cars[1] + "");
    document.write(cars[2] + "");
    break list;
    document.write(cars[3] + "");
    document.write(cars[4] + "");
    document.write(cars[5] + "");
}// break 跳出了 list 代码块，只写入 cars 前三个元素的值

continue 用于跳过循环中的一个迭代。continue 语句（带有或不带标签引用）只能用在循环中。

语法

JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。JavaScript 保留的一些关键字：
在这里插入图片描述
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;//Number,通过数字字面量赋值 
var points = x * 10;//Number,通过表达式字面量赋值
var lastName = "Johnson";//String,通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];//Array,通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};//Object,通过对象字面量赋值

局部变量：在函数中通过var声明的变量。
全局变量：在函数外通过var声明的变量。
没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

JavaScript数组

<!DOCTYPE html>
<html>
<body>
<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
for (i=0;i<cars.length;i++)//依次输出数组中的元素
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>

创建数组方式很多，还可以

var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];

JavaScript对象

JavaScript 对象是变量的容器。对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person =    
{        
    firstname : "John",
    lastname  : "Doe",    
    id        :  5566    
};    
document.write(person.lastname + "<br>");    
document.write(person["lastname"] + "<br>");

也可先创建对象再追加属性和方法

var person = new Object();
person.firstname = "John";
person.lasttname = "Doe";
person.id = 5566;

属性值可以是函数，加（）执行函数，不加（）返回函数定义。JavaScript对象中属性具有唯一性（这里的属性包括方法），如果有两个重复的属性，则以最后赋值为准。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,    
    fullName : function()     
    {       
    	return this.firstName + " " + this.lastName;    
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
</body>
</html>

不加括号输出函数表达式：function() { return this.firstName + " " + this.lastName; }
加括号输出函数执行结果：John Doe

JavaScript事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

正则表达式

/正则表达式主体/修饰符(可选)
正则表达式描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

//搜索字符串 Runoob 的初始位置，不区分大小写
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
var n = str.search("Runoob");//也可使用字符串作为参数

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() 
{
    var str = document.getElementById("demo").innerHTML;     
    var txt = str.replace(/microsoft/i,"Runoob");
    //var txt = str.replace("Microsoft","Runoob");字符串形式
    document.getElementById("demo").innerHTML = txt;
}
</script>

修饰符

修饰符可以选择匹配模式和区不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

模式

方括号用于查找某个范围内的字符：

在这里插入图片描述
元字符是拥有特殊含义的字符：

在这里插入图片描述
量词：

在这里插入图片描述

RegExp对象

JavaScript RegExp 对象参考手册：RegExp 对象参考手册
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

RegExp 对象方法：
在这里插入图片描述
支持正则表达式的 String 对象的方法：

比如exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

//从字符串中搜索字符 "e" 
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

输出结果为e

正则表达式验证实例

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

demo1

利用后端接口，利用html+css+js+ajax响应实现简单用户增删改查。本项目前后端分离，后端接口由他人搭建。首先，放一放接口信息，body包括用户id、用户name、用户password。

http://192.168.0.111
http://192.168.0.111:8080/test/getAllUserMessage 获取所有用户信息
http://192.168.0.111:8080/test/queryUserMessageById +id 传入id查找信息
http://192.168.0.111:8080/test/addUserMessage +body 传入body增加信息（不用加id）
http://192.168.0.111:8080/test/deleteUserMessageByName +name 通过name删除信息
http://192.168.0.111:8080/test/checkUserMessage +body 传入body检查信息
http://192.168.0.111:8080/test/updateUserMessage +body 传入body更新信息,传出true/false,根据id判别是否存在进行body更新
文件目录如下所示：

html页面

index.html登录

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>登录页面</title>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Login form web template, Sign up Web Templates, Flat Web Templates, 
        Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, 
        Samsung, LG, SonyErricsson, Motorola web design" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#userLogin").click(function () {
                var name = $("#name").val();
                var password = parseInt($("#password").val()); //将password转化为int型
                console.log(name, password)
                var json = {
                    "name": name,
                    password: password
                };
                $.ajax({
                    type: 'post',
                    url: "http://192.168.0.111:8080/test/checkUserMessage",
                    contentType: "application/json;chartset=utf-8",
                    data: JSON.stringify(json),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data) {
                            window.open("user.html");
                        } else
                            alert("账号或密码错误，请重新输入");
                    },
                    error: function () {
                        alert("登录失败,请重新操作");
                    }
                })
            });
        })
    </script>

</head>

<body style="background-image: url(images/test2.jpg);background-repeat: no-repeat;background-size: 1550px 757px;">
    <div class="login">
        <h2 style="color: #000000; font-weight: bolder;">欢迎登录</h2>
        <div class="login-top">
            <h1>登录</h1>

            <input type="text" id="name" placeholder="请输入账号" />
            <input type="password" id="password" placeholder="请输入密码" />

            <div class="forgot">
                <input type="button" id="userLogin" value="登录"></input></br>
            </div>

        </div>
        <div class="login-bottom">
            <h3>如果你是新用户 请&nbsp;<a href="注册.html">注册</a>哦</h3>
        </div>
    </div>
    <div class="copyright">

    </div>

</body>

</html>

登录页面

注册.html用户新增

<!DOCTYPE HTML>
<html>

<head>
    <title>增加新用户页面</title>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords"
        content="Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />

    <!--Google Fonts-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body style="background-image: url(images/test2.jpg);background-repeat: no-repeat;background-size: 1550px 757px;">
    <div class="login">
        <h2>欢迎增加新用户</h2>
        <div class="login-top">
            <h1>增加新用户</h1>
            <input type="text" id="name" placeholder="请输入姓名">
            <input type="password" id="password" placeholder="请输入密码">
            <div class="forgot">
                <input type="button" id="register" value="增加新用户"></input></br>
            </div>
        </div>
        <div class="login-bottom">
        </div>
    </div>
    <div class="copyright">
    </div>

    <script>
        $("#register").click(function () {
            // $.ajax({
            //     type: "get",
            //     url: "http://192.168.0.111:8080/test/getAllUserMessage",
            //     contentType: "application/json;charset=UTF-8",
            //     dataType: "json",
            //     async: false,
            //     success: function (res) {
            //         console.log(res)
            //         var html = ''
            //         for (var i = 0; i < res.length; i++) {
            //             html = html + '<tr>' + '<td>'
            //             html = html + res[i].id + '</td>'
            //             html = html + '<td>'
            //             html = html + res[i].name + '</td>'
            //             html = html + '<td>'
            //             html = html + res[i].password + '</td>'
            //             html = html + '</tr>'
            //         }
            //         // Id = res[res.length - 1].id + 3;//取res最后id+1为新id

            //     },
            //     error: function (e) {
            //         console.log("失败" + e);
            //     }
            // });
            var name = $("#name").val();
            var password = $("#password").val();
            var json = {
                // "id": Id,
                "name": name,
                password: password,
            };
            console.log(json);
            $.ajax({
                type: 'post',
                url: "http://192.168.0.111:8080/test/addUserMessage",
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify(json),
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        alert("增加新用户成功");
                    } else{
                        alert("该用户已存在,请重新操作");
                    }
                },
                error: function () {
                    alert("增加新用户失败,请重新操作!!!!");
                }
            })
        })
    </script>
</body>

</html>

注册页面

user.html用户信息输出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息页面</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link href="css\usershow.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
    <span style="text-align: center;">
        <h2>用户信息输出</h2>
    </span>
    <div>
        <table>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>password</th>
            </tr>
        </table>
        <table id="main"></table>
    </div>
    <div id="neon-btn">
        <input class="btn three" type="button" value="返回" onclick="window.open('index.html')">
        <input class="btn three" type="button" value="修改" onclick="window.open('update.html')">
        <input class="btn three" type="button" value="删除" onclick="window.open('delete.html')">
        <input class="btn three" type="button" value="查看" onclick="window.open('check.html')">
    </div>
</body>
<script>
    $.ajax({
        type: "get",
        url: "http://192.168.0.111:8080/test/getAllUserMessage",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (res) {
            console.log(res)
            var html = ''
            for (var i = 0; i < res.length; i++) {
                html = html + '<tr>' + '<td>'
                html = html + res[i].id + '</td>'
                html = html + '<td>'
                html = html + res[i].name + '</td>'
                html = html + '<td>'
                html = html + res[i].password + '</td>'
                // html = html + '<td>'+
                // '<a href="delete.html" class="btn">删除</a>'+
                // '<a href="update.html" class="btn">修改</a>'+
                // '<a href="check.html" class="btn">查看</a>'
                // html = html + '</td>'
                html = html + '</tr>'
            }
            console.log(html)
            $("#main").html(html)
            // console.log(document.getElementsByClassName("id"))
        },
        error: function (e) {
            console.log("失败" + e);
        }
    });
</script>

</html>

用户信息输出页面

delete.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body style="background-image: url(images/test2.jpg);background-repeat: no-repeat;background-size: 1550px 757px;">
    <div class="login">
        <h2>删除页面</h2>
        <div class="login-top">
            <h1>删除用户</h1>
            <input type="text" id="name" placeholder="请输入要删除用户名">
            <div class="forgot">
                <input type="button" class="btn three" id="register" value="确定删除"></input></br>
            </div>
        </div>
        <div class="login-bottom">
        </div>
    </div>
    <div class="copyright">
    </div>

    <script type="text/javascript">
        $("#register").click(function () {
            var name = $("#name").val();
            console.log(name)
            var url = 'http://192.168.0.111:8080/test/deleteUserMessageByName?name=' + name;
            console.log(url)
            $.ajax({
                type: "post",
                url: url,
                contentType: "application/x-www-form-urlencoded",
                // contentType: "application/json;charset=UTF-8", 
                data: JSON.stringify(name),
                // dataType: "string",
                success: function (data) {
                    console.log(data)
                    if (data == "表中不存在该信息")
                        alert("用户不存在，请重新输入！");
                    else
                        alert("删除成功！")
                },
                error: function (data) {
                    console.log(data)
                    alert("操作失败，请重新操作！");
                }
            });
        })
    </script>
</body>

</html>

updata.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body  style="background-image: url(images/test2.jpg);background-repeat: no-repeat;background-size: 1550px 757px;">
    <div class="login">
        <h2>欢迎修改用户信息</h2>
        <div class="login-top">
            <h1>修改用户</h1>
            <input type="text" id="Id" placeholder="请输入要修改用户的id">
            <input type="text" id="name" placeholder="请输入新的用户名">
            <input type="password" id="password" placeholder="请输入新的密码">
            <div class="forgot">
                <input type="button" class="btn three" id="register" value="确定修改"></input></br>
            </div>
        </div>
        <div class="login-bottom">
        </div>
    </div>
    <div class="copyright">
    </div>
    <script>
        $("#register").click(function () {
            var Id = $("#Id").val();
            var name = $("#name").val();
            var password = $("#password").val();
            var json = {
                "id": Id,
                "name": name,
                password: password,
            };
            console.log(json);
            $.ajax({
                type: 'post',
                url: "http://192.168.0.111:8080/test/updateUserMessage",
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify(json),
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if (data) {
                        alert("修改成功");
                    } else{
                        alert("修改失败，请重新操作");
                    }
                },
                error: function (data) {
                    console.log(data)
                    alert("修改错误！！");
                }
            })
        })
    </script>
</body>
</body>
</html>

check.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/check.css" rel="stylesheet" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body style="background-image: url(images/test2.jpg);background-repeat: no-repeat;background-size: 1550px 757px;">

    <div class="login">
        <h2>欢迎查看用户消息</h2>
        <div class="login-top">
            <h1>查看用户</h1>
            <input type="text" id="id" placeholder="请输入要查看用户的id">
            <div class="forgot">
                <input type="button" class="btn three" id="register" value="确定"></input>
            </div>
            <table class="tstyle">
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>password</th>
                </tr>
            </table>
            <table id="main"></table>
        </div>
        <div class="login-bottom"></div>
    </div>
    <div class="copyright">
    </div>
    <script type="text/javascript">
        $("#register").click(function () {
            var id = $("#id").val();
            console.log(id)
            var url = 'http://192.168.0.111:8080/test/queryUserMessageById?id=' + id;
            console.log(url)
            $.ajax({
                type: "post",
                url: url,
                contentType: "application/json;charset=UTF-8",
                // data: json,
                dataType: "json",
                // async: false,
                success: function (data) {
                    console.log(data)
                    var html = ''
                    html = html + '<tr>' + '<td>'
                    html = html + data.id + '</td>'
                    html = html + '<td>'
                    html = html + data.name + '</td>'
                    html = html + '<td>'
                    html = html + data.password + '</td>'
                    console.log(html)
                    $("#main").html(html)
                },
                error: function (data) {
                    alert("用户不存在，请重新输入！");
                }
            });
        })
    </script>
</body>

</html>

css样式

check.css

table {
    width: 100%;
    border: 1px solid black;
    margin: 0 auto;
    border-collapse: collapse;
}

.tstyle{
    margin-top: 10%;
}

td {
    width: 33%;
    /* border: 1px solid black; */
    text-align: center;
    vertical-align: center;
}
  
th {
    width: 33%;
    /* border: 1px solid black; */
    text-align: center;
    vertical-align: center;
}

usershow.css

body {
  background-image: url("test3.jpg");
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  overflow-y: scroll;
}

table {
  width: 90%;
  border: 1px solid black;
  margin: 0 auto;
  border-collapse: collapse;
}

td {
  height: 50px;
  width: 25%;
  /* border: 1px solid black; */
  text-align: center;
  vertical-align: center;
}

th {
  height: 50px;
  width: 25%;
  /* border: 1px solid black; */
  text-align: center;
  vertical-align: center;
}

tbody tr:nth-child(even) {
  background-color: rgb(228, 250, 215);
}

#neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

.three {
  color: #0c1007;
}

.btn:hover {
  color: white;
  border: 0;
}

.three:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}

style.css

/* start editing from here */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* start editing from here */
a {
  text-decoration: none;
}

.txt-rt {
  text-align: right;
}

/* text align right */
.txt-lt {
  text-align: left;
}

/* text align left */
.txt-center {
  text-align: center;
}

/* text align center */
.float-rt {
  float: right;
}

/* float right */
.float-lt {
  float: left;
}

/* float left */
.clear {
  clear: both;
}

/* clear float */
.pos-relative {
  position: relative;
}

/* Position Relative */
.pos-absolute {
  position: absolute;
}

/* Position Absolute */
.vertical-base {
  vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
  vertical-align: top;
}

/* vertical align top */
.underline {
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin: 0 0 20px 0;
}

/* Add 5px bottom padding and a underline */
nav.vertical ul li {
  display: block;
}

/* vertical menu */
nav.horizontal ul li {
  display: inline-block;
}

/* horizontal menu */
img {
  max-width: 100%;
}

/*end reset*/
/*--login start here--*/
body {
  background: url(../images/banner.jpg)repeat;
  padding: 100px 0px 30px 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
}

.login {
  width: 32%;
  margin: 0 auto;
}

.login h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0px 0px 50px 0px;
  font-family: 'Droid Serif', serif;
}

.login-top {
  background: #E1E1E1;
  border-radius: 25px 25px 0px 0px;
  -webkit-border-radius: 25px 25px 0px 0px;
  -moz-border-radius: 25px 25px 0px 0px;
  -o-border-radius: 25px 25px 0px 0px;
  padding: 40px 60px;
}

.login-top h1 {
  text-align: center;
  font-size: 27px;
  font-weight: 500;
  color: #F45B4B;
  margin: 0px 0px 20px 0px;
}

.login-top input[type="text"] {
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #818181;
  padding: 15px 20px;
  background: #CACACA;
  border: 1px solid #ccc;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  margin: 0px 0px 12px 0px;
  width: 88%;
  -webkit-appearance: none;
}

.login-top input[type="password"] {
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #818181;
  padding: 15px 20px;
  background: #CACACA;
  border: 1px solid #ccc;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  margin: 0px 0px 12px 0px;
  width: 88%;
  -webkit-appearance: none;
}

.forgot a {
  font-size: 13px;
  font-weight: 500;
  color: #F45B4B;
  display: inline-block;
  border-right: 2px solid #F45B4B;
  padding: 0px 7px 0px 0px;
}

.forgot a:hover {
  color: #818181;
}

.forgot input[type="submit"] {
  background: #F45B4B;
  color: #FFF;
  font-size: 17px;
  font-weight: 400;
  padding: 8px 7px;
  width: 40%;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  margin: 0px 7px 0px 3px;
  outline: none;
  border: none;
}

.forgot input[type="submit"]:hover {
  background: #818181;
  transition: 1s all;
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -o-transition: 1s all;
}

.forgot {
  text-align: right;
}

.login-bottom {
  background: #E15748;
  padding: 40px 65px;
  border-radius: 0px 0px 25px 25px;
  -webkit-border-radius: 0px 0px 25px 25px;
  -moz-border-radius: 0px 0px 25px 25px;
  -o-border-radius: 0px 0px 25px 25px;
  text-align: right;
  border-top: 2px solid #AD4337;
}

.login-bottom h3 {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.login-bottom h3 a {
  font-size: 25px;
  font-weight: 500;
  color: #fff;
}

.login-bottom h3 a:hover {
  color: #696969;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
}

.copyright {
  padding: 150px 0px 0px 0px;
  text-align: center;
}

.copyright p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

.copyright p a {
  font-size: 15px;
  font-weight: 400;
  color: #E15748;
}

.copyright p a:hover {
  color: #fff;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
}

/*--login end here--*/
/*--meadia quiries start here--*/
@media(max-width:1440px) {
  .login {
    width: 35%;
  }
}

@media(max-width:1366px) {
  .login {
    width: 37%;
  }
}

@media(max-width:1280px) {
  .login {
    width: 40%;
  }
}

@media(max-width:1024px) {
  .login {
    width: 48%;
  }

  .copyright {
    padding: 100px 0px 0px 0px;
  }
}

@media(max-width:768px) {
  .login {
    width: 65%;
  }

  .login-top h1 {
    font-size: 25px;
  }

  .login-bottom h3 a {
    font-size: 22px;
  }

  .copyright {
    padding: 250px 0px 0px 0px;
  }

  body {
    padding: 100px 0px 0px 0px;
  }

  .login h2 {
    font-size: 28px;
  }
}

@media(max-width:640px) {
  .login-top h1 {
    font-size: 23px;
  }

  .forgot input[type="submit"] {
    font-size: 15px;
    width: 22%;
  }

  .login-top input[type="text"] {
    padding: 12px 20px;
  }

  .login-top input[type="password"] {
    padding: 12px 20px;
  }

  .login-bottom h3 a {
    font-size: 19px;
  }

  .login-bottom h3 {
    font-size: 13px;
  }

  .copyright {
    padding: 110px 0px 0px 0px;
  }

  body {
    padding: 110px 0px 0px 0px;
  }
}

@media(max-width:480px) {
  .login {
    width: 80%;
  }

  .login-top h1 {
    font-size: 21px;
  }

  .login-top input[type="text"] {
    width: 85%;
  }

  .login-top {
    padding: 30px 40px;
  }

  .login-top input[type="password"] {
    width: 85%;
  }

  .login h2 {
    font-size: 25px;
  }
}

@media(max-width:320px) {
  .login {
    width: 90%;
  }

  .login-top {
    padding: 20px 25px;
  }

  .login-top input[type="text"] {
    width: 81%;
    padding: 10px 20px;
    font-size: 13px;
    margin: 0px 0px 7px 0px;
  }

  .login-top input[type="password"] {
    width: 81%;
    padding: 10px 20px;
    font-size: 13px;
    margin: 0px 0px 7px 0px;
  }

  .forgot input[type="submit"] {
    font-size: 11px;
    width: 25%;
    padding: 6px 7px;
  }

  .forgot a {
    font-size: 11px;
  }

  .login-bottom {
    padding: 20px 25px;
  }

  .login-bottom h3 {
    font-size: 11px;
  }

  .login-bottom h3 a {
    font-size: 17px;
  }

  body {
    padding: 50px 0px 0px 0px;
  }

  .copyright p {
    font-size: 13px;
  }

  .copyright p a {
    font-size: 13px;
  }

  .login h2 {
    font-size: 23px;
    margin: 0px 0px 35px 0px;
  }

  .copyright {
    padding: 75px 0px 0px 0px;
  }
}

#neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

.three {
  color: #0c1007;
}

.btn:hover {
  color: white;
  border: 0;
}

.three:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}

/*--meadia quiries end here--*/