一、页面效果展示
这个登录页面以简洁大气的风格呈现，背景采用了线性渐变，从深灰色过渡到浅紫色，营造出一种科技感十足的氛围。页面中央是一个白色的登录框，包含了用户名、密码输入框，以及一个带有动态验证码的输入框和刷新验证码的图片。登录按钮采用了鲜艳的蓝色，当鼠标悬停时，颜色会变为橙色，增加了交互性。
二、代码实现详解
- 生成验证码函数
function generateCaptcha() {
// 生成随机的四位数字验证码
let captcha = "";
for (let i = 0; i < 4; i++) {
captcha += Math.floor(Math.random() * 10);
}
return captcha;
}
这个函数通过循环生成一个四位的随机数字验证码，为登录页面增加了一层安全保障。
- 刷新验证码函数
function refreshCaptcha() {
const captcha = generateCaptcha();
const captchaImage = document.getElementById('captchaImage');
// 使用 canvas 绘制验证码图片
const canvas = document.createElement('canvas');
canvas.width = 80;
canvas.height = 30;
const ctx = canvas.getContext('2d');
ctx.font = '20px Arial';
ctx.fillStyle = '#333';
ctx.fillText(captcha, 10, 25);
captchaImage.src = canvas.toDataURL();
}
该函数调用生成验证码的函数，获取新的验证码后，使用 HTML5 的canvas元素绘制验证码图片，并将其设置为页面上验证码图片的源。
- 页面样式
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
}
.container{
background: linear-gradient(to right, #39393d, #818195);
position: relative;
justify-content: center;
display: flex;
align-items: center;
height: 100vh;
}
.container.kuang{
display: flex;
flex-direction: column;
height: 300px;
width: 280px;
background: white;
position: absolute;
border: 2px solid #050303;
}
.container.kuang p{
margin-top: 20px;
font-weight: 600;
background: linear-gradient(to right, #ff0000, #0000ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: aaa;
font-size: 40px;
text-align: center;
}
@font-face {
font-family: aaa;
src: url(/font/dingliehakkafont.ttf) format("TrueType");
}
.container.kuang input{
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0;
}
.container.kuang.yanzhengma {
display: flex;
align-items: center;
width: 50%;
position: relative;
left: 27px;
}
.container.kuang.yanzhengma input{
width: 20vw;
margin-right: 20px;
}
.container.kuang.yanzhengma img {
}
.denglu {
width: 70%;
font-size: 14px;
font-weight: bold;
color: #333;
text-align: center;
padding: 5px 10px;
border: 1px solid #ccc;
background-color: #423ae0;
border-radius: 5px;
position: relative;
top: 2px;
margin: 0 auto;
cursor: pointer;
}
.denglu:hover{
background: #df4516;
color: #fff;
padding: 10px 20px;
}
这段 CSS 代码为登录页面设置了整体的布局和样式。通过linear-gradient设置了背景的渐变效果，登录框采用了白色背景和黑色边框，字体样式也经过精心设计，使得页面更加美观。
- HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/登录.css">
<script src="js/onload.js" defer></script>
</head>
<body>
<div class="container">
<div class="kuang">
<p>登录</p>
<input type="text">
<input type="password">
<div class="yanzhengma">
<input type="text" id="captchaInput">
<img id="captchaImage" src="#" alt="验证码图片" onclick="refreshCaptcha()">
</div>
<button class="denglu" >登录</button>
</div>
</div>
</body>
</html>
HTML 结构简洁明了，通过div元素构建了页面的布局，包含了登录框和各个输入框、按钮以及验证码图片。
三、总结
这个登录页面的代码展示了前端开发中如何运用 HTML、CSS 和 JavaScript 来创建一个既美观又实用的用户界面。通过生成随机验证码和使用canvas绘制验证码图片，增加了登录的安全性。同时，页面的样式设计也使得它在视觉上更加吸引人。希望这个代码分享能给大家在前端开发中带来一些启发和帮助。