分享一个后端专用login模板
给大家啊分享一个后端专用login模板
Java工程师再也不用这样啦---》
html源码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<style>
html {
height: 100%;
user-select: none;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
background-color: black;
}
.title {
position: absolute;
top: 0;
width: 100%;
}
.title h4 {
text-align: left;
color: green;
font-size: 40px;
font-weight: 400;
letter-spacing: 15px;
}
.ld {
position: absolute;
right: 0;
top: 0;
}
.msg {
width: 480px;
height: 230px;
position: absolute;
bottom: 15px;
left: 15px;
overflow: hidden;
border-right: green 1px solid;
}
.msg div {
width: 500px;
height: 100%;
border: green 1px solid;
background-color: transparent;
color: green;
padding: 15px;
box-sizing: border-box;
overflow-y: scroll;
}
.msg div p {
padding: 0;
margin: 0;
font-size: 12px;
}
.logo{
width: 150px;
height: 150px;
overflow: hidden;
background-color: red;
position: absolute;left: 0;
top:50px;
right: 0;
margin: 0 auto;
border-radius: 50%;
box-sizing: border-box;
}
.logo img{
width: 100%;
height: 100%;
}
.wrap {
width: 35%;
height: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
box-sizing: border-box;
}
.login {
width: 100%;
height: 50%;
transform: translateY(50%);
}
.in {
padding-top: 30px;
width: 85%;
height: 45px;
margin: 30px auto 0;
text-align: center;
}
input::placeholder {
color: green;
font-size: 18px;
}
input {
box-sizing: border-box;
font-size: 20px;
padding: 10px;
width: inherit;
background-color: transparent;
border: none;
outline: none;
border: 1px solid green;
color: green;
}
#username:focus,
#password:focus {
border: 1px solid red;
}
#login {
background-color: green;
color: white;
padding: 15px 5px;
transition: all .5s;
cursor: pointer;
}
#login:hover {
background-color: rgb(235, 67, 67);
color: gold;
border-color: rgb(235, 67, 67);
}
.myalert {
min-width: 200px;
height: 80px;
border: 1px solid green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 80px;
color: white;
display: none;
background-color: rgb(121, 250, 164);
}
@media screen and (max-width:1350px){
body{
display: none;
}
}
</style>
</head>
<body>
<div class="title">
<h4>OA管理系统登录</h4>
</div>
<div class="ld">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596626423978&di=2d94fd6a21f482c526241385015ede80&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181223%2F667787c706794c3e807c4f694f25ac62.gif"
alt="loading···">
</div>
<div class="msg">
<div id="msg">
</div>
</div>
<div class="logo">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596638244085&di=25f527dde2a3f275c5f593abbc63c568&imgtype=0&src=http%3A%2F%2Foss.cyzone.cn%2F2016%2F0805%2F20160805124042525.png" alt="">
</div>
<div class="wrap">
<div class="login">
<form action="">
<div class="in">
<input type="text" autofocus name="username" id="username" placeholder="username······"
autocomplete="off">
</div>
<div class="in">
<input type="password" name="password" id="password" placeholder="password······"
autocomplete="off">
</div>
<div class="in">
<input type="button" name="login" value="登 录" id="login" onclick="loginf()">
</div>
</form>
</div>
</div>
<div class="myalert"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var msg = document.getElementById("msg");
var info = [
"账号或密码格式不正确!",
"登录中，请稍后-------------",
"很遗憾，登录失败!",
"恭喜你，登录成功！",
"正在请求服务器资源，并跳转至后台管理页面······",
"-------------",
]
function loginf() {
var username = document.getElementById("username").value;
var psw = document.getElementById("password").value;
if (!check(username, psw)) {
myalert(info[0], "red");
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:red;'>系统信息:</span> " + info[0];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
return false;
}
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:yellow;'>系统信息:</span> " + info[1];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
//登录业务
$.post("http://test.com/api/login", {
username: username,
password: psw
}, data => {
if (data != false) {
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:green;'>系统信息:</span> " + info[3];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:green;'>系统信息:</span> " + info[4];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:green;'>系统信息:</span> " + info[5];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
var i = 3
myalert(info[3]+i+"秒后跳转！","green",false);
var time = setInterval(() => {
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:red;'>系统信息:</span> " + i + "秒后进行跳转，请注意！";
msg.append(p);
msg.scrollTop = msg.scrollHeight;
i--;
if (i < 0) {
clearInterval(time);
window.location.href = "";
}
}, 3000)
} else {
myalert(info[2], "red");
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:red;'>系统信息:</span> " + info[2];
msg.append(p);
msg.scrollTop = msg.scrollHeight;
}
})
}
function check(username, psw) {
if (username == '' || psw == '') {
return false;
} else {
return true;
}
}
function lb() {
var text = [
"欢迎你，管理员！",
"接下来你需要登录才能继续操作！",
"祝你好运！······",
"-------------",
]
var i = 0;
var timer = setInterval(() => {
var p = document.createElement("p");
if (i <= text.length - 1) {
p.innerHTML = getTime() + "<span style='color:yellow;'>系统信息:</span> " + text[i];
i == 2 ? i = 3 : i++;
msg.appendChild(p);
} else {
clearInterval(timer);
}
msg.scrollTop = msg.scrollHeight;
}, 1000)
}
function getTime() {
var d = new Date();
return `[${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}]`;
}
function myalert(text, color,autoClose) {
if(autoClose==null){
autoClose=true;
}
var f = document.getElementsByClassName("myalert")[0];
f.innerText = text
f.style.color = color;
f.style.display = "block";
if(autoClose){
setTimeout(() => {
f.style.display = "none";
}, 5000)
}
}
window.onload = () => {
lb();
document.body.onkeyup = e => {
if (e.keyCode != 13) {
var p = document.createElement("p");
p.innerHTML = getTime() + "<span style='color:red;'>系统提示:</span> " + "你按下了" + e.key + "键";
msg.append(p);
msg.scrollTop = msg.scrollHeight;
return false;
}
loginf();
}
}
</script>
</html>
分享一个后端专用login模板的更多相关文章
- 分享一个Appium/selenium测试报告模板
介绍 这个模板改编自 这位外国老哥 效果图 错误截图 录像 失败的case可以点击"view"查看报错信息, 也可以点击screenshot查看截图信息,更可以点击replay查看 ...
- 【开源.NET】 分享一个前后端分离的轻量级内容管理框架
开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- 高效的后端API开发模板-illuminant
概要 整体介绍 补充说明 Q. 有了 prisma 自动生成的 graphql 接口, 为什么还要 rest 接口和 websocket 接口? Q. 为什么要通过 illuminant 加一层反向代 ...
- 分享一个批量导出当前实例下的所有linkedserver脚本
分享一个批量导出当前实例下的所有linkedserver脚本 很多时候,我们都需要导出实例下面的登录用户,job,linkedserver等等 导出job比较复杂,下午写了一个脚本把所有的linked ...
- 分享一个漂亮的ASP.NET MVC界面框架
本文分享一个插件化的界面框架,该框架提供了用户.角色.权限管理功能,也提供了插件的管理和插件中心.下图是该界面框架的样式(全部源码和原理介绍下一篇分享,推荐越多,源码放的越早,呵呵). 要使用该界面框 ...
- [Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手"
[Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手" 我在学Unity3D,TankSniper(坦克狙击手)这个项目是用来练手的.游戏玩法来自这里(http://ww ...
- 分享一个PHP调用RestFul接口的函数
php越来越前端化,大型系统中的php经常是调用后端服务的接口,这里分享一个函数.希望对大家有用. /** * [http 调用接口函数] * @Date 2016-07-11 * @Author G ...
随机推荐
- Python 告诉你疫情扩散有多可怕
今年(2020年)是注定要铭记史册的一年,从年初开始新冠疫情,席卷了全球,中国人民众志成城,为战胜疫情做出了巨大牺牲.最近北京疫情形式又变得严峻,面对疫情我们不能掉以轻心.今天我们模拟一下病毒的扩散过 ...
- 2020年最新的过某宝滑块验证技术，Python大牛轻松搞定技术难题
致谢: Charles未晞 Charles的皮卡丘 提供解决思路,此文实为借鉴. 前言: 利用selenium模拟登录淘宝,外界传言这个确实很难过,有各种轨迹检测. 但是我没想到淘宝的滑块验证码这么容 ...
- 设计模式实战系列之@Builder和建造者模式
前言 备受争议的Lombok,有的人喜欢它让代码更整洁,有的人不喜欢它,巴拉巴拉一堆原因.在我看来Lombok唯一的缺点可能就是需要安装插件了,但是对于业务开发的项目来说,它的优点远远超过缺点. 我们 ...
- python设计模式之解释器模式
python设计模式之解释器模式 对每个应用来说,至少有以下两种不同的用户分类. [ ] 基本用户:这类用户只希望能够凭直觉使用应用.他们不喜欢花太多时间配置或学习应用的内部.对他们来说,基本的用法就 ...
- day1 linux常用命令(一)
- 浏览器自动化的一些体会6 增强的webBrowser控件
这里谈两点 1.支持代理服务器切换 一种方法是修改注册表,不是太好的做法,而且,只能改全局设置,不能改局部(比如只让当前的webBrowser控件使用代理,而其他应用不用代理) 另外一个较好的方法,示 ...
- python thread的join与setDeamon
join t.start() t.join() Wait until the thread terminates. This blocks the calling thread until the t ...
- ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解
前言 本文主要介绍的是ELK日志系统中的Filebeat快速入门教程. ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...
- java如何简单的将一个三位正整数分解成三个数
public class Leet { public static void main(String[] args) { Scanner scanner = new Scanner(System.in ...
- 7. oracle表的管理*
一.表名和列名的命名规则: 1.必须以字母开头 2.长度不能超过30个字符 3.不能使用oracle的保留字 4.只能使用如下字符 A-Z,a-z,0-9,$,#等 二.Oracle数据类型1.字符类 ...