自制登陆页面（前端HTML,CSS,JS练习）

最新推荐文章于 2024-06-16 01:19:55 发布

代号[K]

最新推荐文章于 2024-06-16 01:19:55 发布

阅读量2.5k

点赞数 2

文章标签： HTML CSS JS 登陆页面

本文链接：https://blog.csdn.net/MPF1230/article/details/102550008

版权

本文介绍如何创建一个静态登录注册页面，包括点击注册按钮切换显示注册框、密码验证提示等功能。实现细节包括点击事件改变

容器的display属性、静态密码检验逻辑等。源代码可在GitHub上获取。

摘要由CSDN通过智能技术生成

自制静态登陆页面,在同一页面中，实现点击注册按钮，变换到注册的盒子，并且实现两次输入密码不一致的提示操作，登陆密码错误提示，并且3次失败后拒绝登陆

在这里插入图片描述

源代码获取：

https://github.com/akh5/web/tree/master/login

实现效果：
在这里插入图片描述
登陆，注册按钮有一个延时填充颜色的效果

点击注册后会切换盒子到注册

密码不一致时提示

密码错误提示

三次失败后，移除登陆按钮，禁止登陆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <link type="text/css" href="regin.css" rel="stylesheet">
</head>
<body>
<div class="shadow">
    <div class="front">
        <h2>—————登录————-</h2>
        <div class="account"><input placeholder="请输入用户名" id="racc"></div>
        <div class="password"><input type="password" placeholder="请输入密码" id="rpass"></div>
        <div class="style regin">登陆</div>
        <div class="style signup">注册</div>
       </div>
    <div class="back">
        <h2>-————注册————</h2>
        <div class="signaccount"><p>请输入用户名:</p><input class="frame" id="acc1"></div>
        <<

最低0.47元/天解锁文章

代号[K]

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
自制登陆页面（前端HTML,CSS,JS练习）

自制静态登陆页面,在同一页面中，实现点击注册按钮，变换到注册的盒子，并且实现两次输入密码不一致的提示操作，登陆密码错误提示，并且3次失败后拒绝登陆源代码获取：https://github.com/akh5/web/tree/master/login实现效果：登陆，注册按钮有一个延时填充颜色的效果点击注册后会切换盒子到注册密码不一致时提示密码错误提示三次失败后，移除登陆按...
复制链接

扫一扫