[JavaScript知识库] 利用JS实现简单登录

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 利用JS实现简单登录 -> 正文阅读

[JavaScript知识库]利用JS实现简单登录

本文将介绍如何利用JS实现简单的账户验证及登录跳转。

HTML

首先建立跳转页。

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

然后建立登录页。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>管理系统</title>
	<link rel="stylesheet" type="text/css" href="de.css"> <!--引入样式-->
	<script type="text/javascript" src="de.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="登录">
			<p>? 2022 ocean 版权所有</p>
		</form>
	</div>
</body>
</html>

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="test.html";  //此处设置登录后跳转页面
		window.document.f.submit();
	}
	else{
		alert("用户名或密码错误！");
	}

}

CSS?

然后建立CSS。笔者选的颜色不好，仅作示例。

这里将文本框与按钮分开设置，分原始与悬停两种情况。并设置了阴影。

html{
	background-image: url("de.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);  /*阴影*/
}