【HTML+CSS+JS】前台简单功能之====登录界面功能

御风泊舟

于 2020-07-30 17:51:36 发布

阅读量1.2k

点赞数 6

分类专栏： HTML+CSS+JS

本文链接：https://blog.csdn.net/Lydia233/article/details/107695659

版权

HTML+CSS+JS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

【HTML+CSS+JS】前台简单功能之====登录界面功能

界面效果如下：
在这里插入图片描述
代码如下：
load.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录</title>
	<script type="text/javascript" src="../js/load.js"></script>
    <link href="../style/load.css" rel="stylesheet" />
</head>
<body>
    <header>欢迎来到<span>简简动漫网站</span></header>
    <section>
        <img src="../img/chuyin.jpg" />
        <form>
            <h4>简简登录窗口</h4>
            <p>账号:<input type="text" id="userName" /></p>
            <p>密码:<input  type="password" id="password"/></span></p>
			<span id="enter_check" class="enter"></span>
            <div>
               <p>
			   <input type="button" value="登录" id="enter" onclick="myEnter()" />
			   <input type="button" value="注册" id="register" onclick="myRegister()" />
			   <input type="reset" value="重置" id="reset" />
			   </p>
            </div>
            <p id="home">
				&nbsp;<a href="main.html">返回主页</a>&nbsp;&nbsp;&nbsp;
				<a href="" onclick="myDemand()">忘记密码？</a>
			</p>
			
        </form>
			<p id="enterKey">
				账户/密码：007/123456
			</p>
    </section>
    <footer></footer>
</body>
</html>

load.js

//跳转到注册页面
function myRegister(){
	window.location.href = "../html/register.html";
}
//账户密码校验成功登录后跳转的页面,可自行设置，此处设为弹框提示登陆成功
function myEnter(){
	var userName = document.getElementById("userName");
	var password=document.getElementById("password");
	var check = document.getElementById("enter_check");	
	if(userName.value == '007' && password.value == '123456'){
		alert("登陆成功！");
	}else{
		check.innerHTML="<font color=red>登录失败，账户或密码有误!</font>"
	}
}
//提示账户/密码
function myDemand(){
	alert("账户/密码请看屏幕左上方！");
}

load.css

body {
font-family:宋体;
font-size:1em;
background-color:rgb(234,245,250);
}
header {
    text-align:center;
    font-size:1.1em;
    letter-spacing:1em;
}
header span {
    font-family:微软雅黑;
    font-size:1.2em;
    font-weight:600;
}
section img {
    position:absolute;
    left:180px;
    top:100px;
    z-index:-1;
}
form {
    background-color:rgb(240,250,255);
    width:300px;
    height:200px;
    text-align:center;
    position:absolute;
    top:150px;
    left:700px;
    border:20px solid rgb(64, 174, 168);
}
a {
    padding-left:15px;
    text-decoration:none;
    color:black;
}
a:hover {
    color:rgb(105, 56, 56);
}
#home {
    text-align:left;
    padding-left:25px;
}

御风泊舟

关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS+JS】前台简单功能之====登录界面功能

【HTML+CSS+JS】前台简单功能之====登录界面功能界面效果如下：代码如下：load.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>登录</title> <s
复制链接

扫一扫