有手就会的JS登录页面

怀念那个她

于 2024-09-29 14:46:46 发布

阅读量272

点赞数 5

本文链接：https://blog.csdn.net/2302_81211062/article/details/142633948

版权

一、工具

屠龙的少年必3定有一把神兵利器，编程也是，本人使用的是Sublime text 3，它是一款轻量级网页编辑器，拥有高亮显示、tab键自动补全功能。当然，其他的编辑器也一样，让我们开始编程吧。

二、html的建立

首先，我们要建立两个后缀为.html的文件，一个是登录界面，另一个是登录成功界面，登录界面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理系统</title>
    <link rel="stylesheet" type="text/css" href="style.css"> <!--引入样式-->
    <script type="text/javascript" src="dl.js"></script>  <!--引入脚本-->
</head>
<body>
    
    <div>
        <form name="f" onsubmit="check(this)">  <!--表单区,placeholder属性规定填充内容-->
            <h1>网站管理系统</h1>
            <input type="text" id="name" placeholder="账号"><br>
            <input type="password" id="pass" placeholder="密码"><br>
            <input type="button" onclick="check(this)" value="登录">
        </form>
    </div>
    
</body>
</html>

代码中title是标题，link是连接到我们的.CSS文件，script是连接到我们的.JS文件。

body是我们网页的“身体“，div是一个块区域，form是一个表单，form在div里，代表它的内容会固定在该块区域内。<h1>是一个标签，input是代表输入框。

登录成功界面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>系统首页</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>登录成功！此为系统首页模拟页面。</h1>
</body>
</html>

三、CSS文件的建立

我们要建立一个后缀为.css的文件，代码如下：

html{
    background-image: url(images/manba.jpg);

}
 
form{
    text-align: center;
    position: absolute;   /*表单于页面居中*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
input[type=text],input[type=password]{
    background-color: white;  /*正常状态样式*/
    color: black;
    border:none;
    border-radius: 20px;
    outline: none;
    text-align: center;
    height: 50px;
    width: 250px;
    margin: 5px;
}
 
input[type=button]{
    background-color: #45A0F2;  /*正常状态样式*/
    color: white;
    border:none;
    border-radius: 20px;
    outline: none;
    text-align: center;
    height: 50px;
    width: 250px;
    margin: 5px;
}
 
input[type=text]:hover,input[type=password]:hover{
    outline: none;  /*悬停时样式*/
    background-color: #65BCD6;
    color: white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19);  /*阴影*/
}
 
input[type=button]:hover{
    outline: none;  /*悬停时样式*/
    background-color:#168DBE;
    color: white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19);  /*阴影*/
}

每个大括号里面的东西都是用来控制它们对应的标识符。

background-image是背景图片，url里面是它的路径，错了无法显示图片

特别说明form里为什么有transform，在上面有了 top: 50%， left: 50%; 表单左上角会在中心，整体并没有中心，所以需要宽和高向左和向上移动50%，+是向右和下，-是上和左。

outline：none,意思是鼠标划过没有黑线

margin 是边框距离

border-radius 是直角边框变为圆角边框

box-shadow 是盒子阴影

四、JS文件的建立

我们要建立一个后缀为.js的文件，代码如下：

function check(thisform) {
 
    var name=document.getElementById("name").value;  //读取表单数据，创建变量
    var pass=document.getElementById("pass").value;
 
    if (name=="admin" && pass=="123456" || name=="admin2" && pass=="456789") {  
        //验证变量。此处设置账号、密码（可设置多组，用||隔开）
        alert("登录成功！");
        window.document.f.action="text.html";  //此处设置登录后跳转页面
        window.document.f.submit();
    }
    else{
        alert("用户名或密码错误！");
    }
 
}