分享一个后端专用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 ...
随机推荐
- Android menu菜单的深入了解。。。
今天补充刚开始的菜单控件,这是基于: https://www.cnblogs.com/aolong/p/12868015.html 里面的菜单写的. 今天学的后面部分是结合昨天的Fragment一起的 ...
- Android后台数据接口交互实现注册功能
首先,在ecplise里面新建一个叫做TestServices的web工程.在WebContent--WEB-INF--libs文件夹下导入两个jar包:mysql-connector-java-6. ...
- 微信公众号里放XLS链接
微信公众号里放XLS链接 我们都知道创建一个微信公众号在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件,如:xls,word等 ...
- Redis服务之集群节点管理
上一篇博客主要聊了下redis cluster的部署配置,以及使用redis.trib.rb工具所需ruby环境的搭建.使用redis.trib.rb工具创建.查看集群相关信息等,回顾请参考https ...
- java SFTP工具类
需要导入jsch-0.1.52.jar import java.io.File; import java.io.FileInputStream; import java.io.FileOutputSt ...
- 2020-04-23：假设一个订单的编号规则是AAAAOrder2020-0000001，AAAAOrder2020-0000002....后面的数字是自增长，如果订单号码达到AAAAOrder2020-1000000(100万)，数据库中应该有100万条数据，此时我随机删除2条数据（物理删除，且不考虑日志和备份），请问怎么找到删掉的数据的编号？给出解题思路即可，答案需要在1秒内运行得到。
福哥答案2020-04-23: 分批查询:分成500次count(),每次count()肯定小于等于2000条数据,经过测试,一次count()在.1ms左右,500次就是500ms.二分法(时间微超 ...
- Spring——IOC（控制反转）与DI（依赖注入）
IOC与DI的理解及使用 控制反转IOC(Inversion of Control)是一种设计思想,DI(依赖注入)是实现IOC的一种方法.在没有IOC的程序中,我们使用面向对象编程,对象的创建于对象 ...
- MySQL设置跳过密码验证
1.linux系统下 在/etc/my.cnf文件中, [mysqld]下面新增skip-grant-tables,然后重启服务器.
- Provisional headers are shown 问题的一种情况
Provisional headers are shown 出现在请求头的报错里面,意思为 显示临时的头部,真实的意思是,请求没有收到服务器返回.如果出现类似情况, 可以在服务端找一找,是否没有给该请 ...
- Qt信号与槽使用方法最完整总结
在图形界面编程中(参考<C++最好的图形库是什么?>),组件之间如何实现通信是核心的技术内容.Qt 使用了信号与槽的机制,非常的高效.简单.易学,方便开发者的使用.本文详细的介绍了Qt 当 ...