分享一个后端专用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 ...
随机推荐
- syslog协议及rsyslog服务全解析
背景:需求来自于一个客户想将服务器的日志转发到自己的日志服务器上,所以希望我们能提供这个转发的功能,同时还要满足syslog协议. 一.什么是syslog协议 1.介绍(略) 2.syslog标准协议 ...
- Ant Design Pro V5 从服务器请求菜单（typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro ...
- 语言模型 Language Model (LM)
定义 什么是语言模型,通俗的讲就是从语法上判断一句话是否通顺.即判断如下的概率成立: \[p(\text{今天是周末})>p(\text{周末是今天}) \] 链式法则(chain rule) ...
- C# 使用代理实现线程间调用
实现功能: 后台线程改变窗体控件(flowLayoutPanel1)的状态. 利用 this.flowLayoutPanel1.InvokeRequired == false,可以知道是主线程调用的自 ...
- C# 8.0 的新特性概览和讲解
本文转自 https://blog.csdn.net/hez2010/article/details/84036742 C# 8.0 的新特性概览和讲解 前言 新的改变 可空引用类型(Nullable ...
- C#LeetCode刷题-回溯算法
回溯算法篇 # 题名 刷题 通过率 难度 10 正则表达式匹配 18.8% 困难 17 电话号码的字母组合 43.8% 中等 22 括号生成 64.9% 中等 37 解数独 45.8% ...
- C#设计模式之3-建造者模式
建造者模式(Builder Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/393 访问. 建造者模式属 ...
- Flutter 打包程序 build android apk
Step-1 Java 路径 找到java路径, 可使用[flutter doctor -v] Step-2: 进入目录 找到路径后 C:\Program Files\Java\jre1.8.0_23 ...
- 快速排序算法简述及python的实现
def kp(arr, i, j): if i<j: #i=j时意味着一边只剩单个数据 base = kpgc(arr, i, j) kp(arr, i, base-1) #kp(arr, i, ...
- 第五篇Scrum冲刺博客--Interesting-Corps
第五篇Scrum冲刺博客 站立式会议 1.会议照片 2.队友完成情况 团队成员 昨日完成 今日计划 鲍鱼铭 音乐详情页面跳转.设计及布局实现设计 搜索页面以及音乐详情页面数据导入及测试 叶学涛 编写分 ...