分享一个后端专用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 IF while逻辑判断语句
if判断语句 if 1==1 and 2==2: pass else: print('error') if 1==1 or 2==2: pass else: print('error') while循 ...
- Pytorch_第五篇_深度学习 (DeepLearning) 基础 [1]---监督学习与无监督学习
深度学习 (DeepLearning) 基础 [1]---监督学习与无监督学习 Introduce 学习了Pytorch基础之后,在利用Pytorch搭建各种神经网络模型解决问题之前,我们需要了解深度 ...
- 【Redis】Redis开篇与如何安装单机版Redis，这次我会了！！
写在前面 很早之前,就有不少小伙伴微信留言说:冰河,你能不能写一个Redis专栏啊,我最近在学习Redis,看书看不下去,学习视频又觉得视频太长了,还是看你的文章比较给力!哈哈,原来我写的文章能够让小 ...
- MongoDB学习1：认识文档数据库MongoDB
1. 关于MongoDB 什么是MongoDB 一个以JSON为数据模型的文档数据库 为什么叫文档数据库 文档来自于"JSON Document",并非我们一般理解的pdf,wor ...
- Android 开发学习进程0.14 Bindview recyclerview popwindow使用 window类属性使用
BindView ButterKnife 优势 绑定组件方便,使用简单 处理点击事件方便,如adapter中的viewholder 同时父组件绑定后子组件无需绑定 注意 在setcontentview ...
- SpringMVC常见问题Error configuring application listener of class org.springframework.web.context.ContextLoaderListenejava.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
六月 20, 2018 9:43:34 下午 org.apache.catalina.core.StandardContext listenerStart 严重: Error configuring ...
- 【面经】超硬核面经，已拿蚂蚁金服Offer！！
写在前面 很多小伙伴都反馈说,现在的工作不好找呀,也不敢跳槽,在原来的岗位上也是战战兢兢!其实,究其根本原因,还是自己技术不过关,如果你技术真的很硬核,怕啥?想去哪去哪呗!这不,我的一个读者去面试了蚂 ...
- Python-Opencv 轮廓常用操作
Python-Opencv 轮廓常用操作 1.颜色空间转换 使用cv2.cvtColor(input_image ,flag),flag为转换类型 常用的转换类型有: BGR和灰度图的转换使用 cv2 ...
- Flutter简介
Flutter简介 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平 ...
- Lambda表达式的几种实现过程
1.无参数+语句(代码块):适用于匿名内部类中方法无参数的情况 private void threadTest(){ //普通写法 new Thread(new Runnable(){ @Overri ...