登录页面 —— 前端代码解析与分享

小刘|

于 2024-09-12 23:21:34 发布

阅读量213

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/qq_69304031/article/details/142188164

版权

一、页面效果展示

这个登录页面以简洁大气的风格呈现，背景采用了线性渐变，从深灰色过渡到浅紫色，营造出一种科技感十足的氛围。页面中央是一个白色的登录框，包含了用户名、密码输入框，以及一个带有动态验证码的输入框和刷新验证码的图片。登录按钮采用了鲜艳的蓝色，当鼠标悬停时，颜色会变为橙色，增加了交互性。

二、代码实现详解

生成验证码函数

   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绘制验证码图片，增加了登录的安全性。同时，页面的样式设计也使得它在视觉上更加吸引人。希望这个代码分享能给大家在前端开发中带来一些启发和帮助。

小刘|

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
登录页面 —— 前端代码解析与分享

这个登录页面的代码展示了前端开发中如何运用 HTML、CSS 和 JavaScript 来创建一个既美观又实用的用户界面。通过生成随机验证码和使用canvas绘制验证码图片，增加了登录的安全性。同时，页面的样式设计也使得它在视觉上更加吸引人。希望这个代码分享能给大家在前端开发中带来一些启发和帮助。
复制链接

扫一扫