分享一个后端专用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 ...
随机推荐
- Linux操作系统 可插拔认证模块PAM（3）
六.Linux 操作系统安全登陆设计 自己编写PAM 模块并编译成动态链接库so 文件,将其添加进/etc/pam.d/login 文件中实现命令行安全登陆设计,将其添加进/etc/pam.d/lig ...
- 线程通讯wait¬ify
目录 相关概念 生产者&消费者模型 相关概念 锁:解决线程间冲突的问题 wait¬ify:解决线程间协作的问题 wait和sleep的区别 wait期间对象锁是释放的,而slee ...
- 使用Python语言通过PyQt5和socket实现UDP服务器
前言 最近做了一个小软件,记录一下相关内容. 已有条件 现在已有一个硬件设备作为客户端(暂称其为"电路"). 基于SIM卡,电路可以通过UDP协议传输数据(程序已经内置在电路中), ...
- C#LeetCode刷题之#617-合并二叉树（Merge Two Binary Trees）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4096 访问. 给定两个二叉树,想象当你将它们中的一个覆盖到另一个 ...
- C#LeetCode刷题之#237-删除链表中的节点（Delete Node in a Linked List）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3832 访问. 请编写一个函数,使其可以删除某个链表中给定的(非末 ...
- JavaScript 通过prototype改变原型的两种方式
// -------------------- prototype 1 -------------------- function A(){} A.prototype.n = 1 let b = ne ...
- python设计模式之修饰器模式
python设计模式之修饰器模式 无论何时我们想对一个对象添加额外的功能,都有下面这些不同的可选方法. [ ] 如果合理,可以直接将功能添加到对象所属的类(例如,添加一个新的方法) [ ] 使用组合 ...
- Nginx的Gzip功能
什么是HTTP压缩 有时候客户端和服务器之间会传输比较大的报文数据,这时候就占用较大的网络带宽和时长.为了节省带宽,加速报文的响应速速,可以将传输的报文数据先进行压缩,然后再进行传输. HTTP支持多 ...
- 【USACO13DEC】 最优挤奶 - 线段树
题目描述 FJ最近买了1个新仓库, 内含N 个挤奶机,1 到N 编号并排成一行. 挤奶机i 每天能产出M(i) 单位的奶.不幸的是, 机器装得太近以至于如果一台机器i 在某天被使用, 那与它相邻的两台 ...
- 【SP2916】Can you answer these queries V - 线段树
题面 You are given a sequence \(a_1,a_2,...,a_n\). (\(|A[i]| \leq 10000 , 1 \leq N \leq 10000\)). A qu ...