效果
是不是见过很多类似的网站？都是采用这种效果的呢？看起来很简洁，也很舒服，那么你知道是怎么实现的吗？接下来就分享给小伙伴们吧
代码
下面的代码是不完全的哟，我后期会将代码上传到此处，想要学习的小伙伴们可以下载来学习一下哈~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>跃动科技登录界面</title>
<!-- 引入bootstrap样式 -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<!--图标库-->
<link
href="css/materialdesignicons.min.css"
rel="stylesheet"
type="text/css"
/>
<!--自定义样式-->
<link href="css/style.min.css" rel="stylesheet" type="text/css" />
<style>
.lear-wrapper {
position: relative;
background-color: antiquewhite;
}
.lear-login {
display: flex !important;
min-height: 100vh;
align-items: center !important;
justify-content: center !important;
}
.login-center1 {
background: #fff;
min-width: 38.25rem;
padding: 2.14286em 3.57143em;
border-radius: 5px;
margin: 2.85714em 0;
}
.login-header {
margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
padding-left: 38px;
padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
left: 0;
right: auto;
width: 38px;
height: 38px;
line-height: 38px;
z-index: 4;
color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
left: 15px;
}
</style>
</head>
<body size-sensor-id="1" style="position: relative">
<div class="row lear-wrapper">
<div class="lear-login">
<div class="login-center1">
<div class="login-header text-center">
<h1>跃动科技</h1>
</div>
<form>
<div class="form-group has-feedback feedback-left">
<input
type="text"
placeholder="请输入您的用户名"
class="form-control"
name="username"
id="username"
/><span class="help-block"></span>
<span
class="mdi mdi-account form-control-feedback"
aria-hidden="true"
></span>
</div>
<div class="form-group has-feedback feedback-left">
<input
type="password"
placeholder="请输入密码"
class="form-control"
id="password"
name="password"
/><span class="help-block"></span>
<span
class="mdi mdi-lock form-control-feedback"
aria-hidden="true"
></span>
</div>
<div
id="captcha_note_parent"
class="form-group has-feedback feedback-left row"
>
<div class="col-xs-7">
<input
type="text"
id="captcha"
name="captcha"
class="form-control"
placeholder="请输入验证码"
/>
</div>
<div class="col-xs-5">
<canvas id="canvas" width="120" height="45"></canvas>
</div>
<span
id="captcha_note_child"
class="help-block"
style="margin-left: 15px"
></span>
</div>
<div class="form-group">
<button
id="login_btn"
class="btn btn-block btn-primary"
type="button"
>
立即登录
</button>
</div>
</form>
<div style="margin-left: 100px">
<a href="">还没有账号？去注册</a>
</div>
<!--源码世界 www.ym4j.com-->
</div>
</div>
</div>
<!-- 引入jQuery和bootstrap的js -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/md5.js"></script>
<!-- 点线粒子插件 -->
<script
color="255,0,255"
opacity="0.8"
zindex="9999"
count="99"
src="js/canvas-nest.js"
></script>
<canvas
width="1280"
height="641"
style="
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: 9999;
opacity: 0.8;
"
></canvas>
<script>
var show_num = [];
$(function () {
$("input[name='username']").blur(verifyUsername);
$("input[name='password']").change(removeLoginDisabled);
//生成图片验证码
drawPic(show_num);
$("#canvas").click(function (e) {
//取消事件的默认动作。
e.preventDefault();
drawPic(show_num);
});
$("#captcha").blur(verifyCaptcha);
$("#login_btn").mousedown(verifyLogin);
//回车登录
$("body").keyup(function (event) {
if (event.keyCode === 13) {
//keyCode=13是回车键
verifyLogin();
}
});
});
function verifyCaptcha() {
var captcha_num = $("#captcha").val().toLowerCase();
var real_num = show_num.join("");
$("#captcha_note_parent").removeClass("has-success has-error");
$("#captcha_note_child").text("");
if (captcha_num == "") {
$("#captcha_note_parent").addClass("has-error");
$("#captcha_note_child").text("验证码为空");
$("#login_btn").attr("disabled", "disabled");
return false;
} else if (captcha_num == real_num) {
$("#captcha_note_parent").addClass("has-success");
$("#captcha_note_child").text("验证码正确");
$("#login_btn").removeAttr("disabled");
return true;
} else {
$("#captcha_note_parent").addClass("has-error");
$("#captcha_note_child").text("验证码错误");
$("#login_btn").attr("disabled", "disabled");
return false;
}
}
function verifyUsername() {
//发送ajax请求校验用户名是否可用
var username = document.getElementById("username").value;
var lock = true;
if (username === "") {
show_validate_msg("#username", "error", "用户名为空");
$("#login_btn").attr("disabled", "disabled");
return false;
} else {
$.ajax({
url: "/login/loginVerifyUsername/" + username,
type: "GET",
success: function (result) {
if (result.code === 200) {
show_validate_msg("#username", "error", "用户名不存在");
$("#login_btn").attr("disabled", "disabled");
lock = false;
} else {
show_validate_msg(
"#username",
"success",
"欢迎" + username + "登录"
);
$("#login_btn").removeAttr("disabled");
}
},
});
return lock;
}
}
function removeLoginDisabled() {
$("#login_btn").removeAttr("disabled");
}
function verifyLogin() {
$("input[name='username']").blur(verifyUsername);
$("#captcha").blur(verifyCaptcha);
if ($("#username").val() == "") {
show_validate_msg("#username", "error", "用户名为空");
$("#login_btn").attr("disabled", "disabled");
return false;
}
if ($("#password").val() == "") {
show_validate_msg("#password", "error", "密码为空");
$("#login_btn").attr("disabled", "disabled");
return false;
}
if ($("#captcha").val() == "") {
$("#captcha_note_parent").addClass("has-error");
$("#captcha_note_child").text("验证码为空");
$("#login_btn").attr("disabled", "disabled");
return false;
}
//alert(verifyUsername);
if (verifyUsername() && verifyCaptcha()) {
var pwd = $("#password").val();
$("#password").val($.md5(pwd));
console.log($("#password").val());
$.ajax({
url: "/login/verifyLogin",
type: "GET",
data: {
username: $("#username").val(),
password: $("#password").val(),
},
success: function (result) {
if (result.code === 100) {
var url = result.extend.url;
//alert(url);
location.href = url;
} else {
show_validate_msg("#password", "error", "密码错误");
$("#login_btn").attr("disabled", "disabled");
}
},
});
}
}
//显示校验结果的提示信息
function show_validate_msg(ele, status, msg) {
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if ("success" === status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
} else if ("error" === status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
/**生成一个随机数**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
/**绘制验证码图片**/
function drawPic(show_num) {
var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.textBaseline = "bottom";
/**绘制背景色**/
ctx.fillStyle = randomColor(280, 280); //颜色若太深可能导致看不清
ctx.fillRect(0, 0, width, height);
/**绘制文字**/
var sCode =
"A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
var aCode = sCode.split(",");
for (var i = 0; i < 4; i++) {
var txt = aCode[randomNum(0, aCode.length)]; //得到随机的一个内容
show_num[i] = txt.toLowerCase();
ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
ctx.font = randomNum(15, 40) + "px SimHei"; //随机生成字体大小
var x = 10 + i * 25;
var y = randomNum(25, 45);
var deg = randomNum(-45, 45);
//修改坐标原点和旋转角度
ctx.translate(x, y);
ctx.rotate((deg * Math.PI) / 180);
ctx.fillText(txt, 0, 0);
//恢复坐标原点和旋转角度
ctx.rotate((-deg * Math.PI) / 180);
ctx.translate(-x, -y);
}
}
</script>
</body>
</html>
本文地址：https://blog.csdn.net/qq_44723773/article/details/109262679
