HTML《个人相册》项目登录

最新推荐文章于 2024-05-11 10:22:08 发布
最新推荐文章于 2024-05-11 10:22:08 发布
阅读量260 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51736721/article/details/117790568
版权

1、要求：点击注册后跳转至注册界面
（1）使用正则表达式验证邮箱
（2）密码长度至少为6位且为字母与数字的组合

登录界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
            margin: 0;
           padding: 0;
       }
       
       html {
           height: 100%;
           width: 100%;
           overflow: hidden;
           margin: 0;
           padding: 0;
           background: url(img/1.jpg) no-repeat 0px 0px;
           background-repeat: no-repeat;
           background-size: 100% 100%;
           -moz-background-size: 100% 100%;
       }
       
       body {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100%;
           background-image: url("背景4.jpg");

          background-repeat: no-repeat;
          background-size: 100% 100%;
       }
       
       #loginDiv {
           width: 400px;
           display: inline-block;
           justify-content: center;
           align-items: center;
           height: 650px;
          
           border-radius: 5px;
       }
       
       p,
       .sexDiv {
           margin-top: 10px;
           margin-left: 20px;
           color: azure;
       }
       
       .sexDiv>input,
       .hobby>input {
           width: 30px;
           height: 17px;
       }
       
       input,
       select {
           margin-left: 15px;
           border-radius: 5px;
           border-style: hidden;
           height: 30px;
           width: 140px;
           background-color: rgba(216, 191, 216, 0.5);
           outline: none;
           color: #f0edf3;
           padding-left: 10px;
       }
       
       .button {
           border-color: cornsilk;
           background-color: rgba(100, 149, 237, .7);
           color: aliceblue;
           border-style: hidden;
           border-radius: 5px;
           width: 100px;
           height: 31px;
           font-size: 16px;
       }
       
       .introduce {
           margin-left: 110px;
       }
       
       .introduce>textarea {
           background-color: rgba(216, 191, 216, 0.5);
           border-style: hidden;
           outline: none;
           border-radius: 5px;
       }
       
       h1 {
           text-align: center;
           margin-bottom: 20px;
           margin-top: 20px;
          color: #f0edf3;
      }
      
      b {
          margin-left: 50px;
          color: #FFEB3B;
          font-size: 10px;
          font-weight: initial;
      }
  </style>
</head>

<body>
<div style="width: 50%; height: 100%; position: relative;">    
  <div id="loginDiv">
      <form action="#">
          <h1>立即注册</h1>
          <p>
            邮件:
            <input id="email" type="email" placeholder="请输入邮箱" required>
            <label id="emil_trip"></label>
        </p>
          <p>用户名:<input id="userNname" type="text"  placeholder="用户名不能超过5位"></p>

          

          <p>
             头像：
             <input type="file">
          </p>

          <div class="sexDiv">
              性别:
              <input class="userSex" name="sex" value="boy" type="radio">男
              <input class="userSex" name="sex" value="girl" type="radio">女
          </div>
          <p>密码:<input id="password" type="password" placeholder="密码长度至少为6位，且为数字字母组合" ></p>

          <p>确认密码:<input id="surePassword" type="password" placeholder="两次输入的密码需一致" ></label></p>

        

          <p style="text-align: left">
              <input type="submit" class="button"  onclick="checkForm()" value="注册">
              
          </p>
      </form>
  </div>

    <div style="width: 400px; height: 700px;  display: inline-block; position: absolute; background-image: url(背景5.jpg);">

        <br>
        <br>
        <br>
        <h3 style="color: rgb(250, 242, 242); text-align: center;">已有账号？</h3> <br>
        <h5 style="color:rgb(255, 254, 254); text-align: center;">有账号就登陆吧！好久不见了！</h5>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div style="text-align: center;">
            <input type="button" onclick='location.href=("登录.html")' value="登陆">
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

  function checkForm() {
      //获取用户名输入项
      var userNname = document.getElementById("userNname");
      var uName = userNname.value;
      if (uName.length < 1 || uName.length > 5) {
             alert("用户名长度为1-5位!!");
             return false;
      }

      //密码长度大于6 和确认必须一致 
      var password = document.getElementById("password");
      var userPass = password.value;
      if (userPass.length < 6) {
          alert("密码要>6位!!");
          return false;
      } else {
          // 此处添加一个密码格式校验
           var reg = new RegExp(/^[A-Za-z0-9]+$/);
             if (!reg.test(str)) {
                 alert("密码要包含数字字母!!");
                 return false;
             }
      }

      //获取确认密码框的值 var
      var surePassword = document.getElementById("surePassword");
      var surePass = surePassword.value;
      if (userPass != surePass) {
          alert("两次密码不一致!!");
          return false;
      }

      //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      var inputEmail = document.getElementById("email");
      var uEmail = inputEmail.value;
      if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
          alert("邮箱不合法!!");
          return false;
      }


      return true;
  }

</script>
</html>

2.要求：
（1）使用正则表达式验证邮箱
（2）用户名长度不能超过五位
（3）密码长度至少为6位且为字母与数字的组合
（4） 两次密码输入须一致

代码：注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      html{
          height: 100%;
          width: 100%;
          overflow: hidden;
          margin: 0;
          padding: 0;
          background: url("背景2.jpg") no-repeat 0px 0px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          -moz-background-size: 100% 100%;
      }
      
      #box1{
            width: 500px;
            height: 400px;
            margin: auto;
            padding:50px 20px 20px 20px ;
           background-color: rgb(248, 247, 246);
           opacity: 0.8;

        }
       
      #radio {
        width: 500px;
          height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 400px;
          background-color: rgba(142, 166, 221, 0.3);
          box-shadow: 7px 7px 17px rgba(106, 130, 179, 0.5);
          border-radius: 1000px;
          animation:turn 1s linear;
      }
      @keyframes turn{
          0%{-webkit-transform:perspective(400px) rotateY(180deg);} 
          100%{-webkit-transform:perspective(400px) rotateY(0deg);} 
      }
       
      input {
          margin-left: 15px;
          border-radius: 5px;
          border-style: hidden;
          height: 30px;
          width: 140px;
          background-color: rgb(252, 252, 252);
          outline: none;
          color: #f0edf3;
          padding-left: 10px;
      }
       
      .button {
          border-color: rgb(241, 241, 241);
          background-color: rgba(100, 149, 237, .7);
          color: aliceblue;
          border-style: hidden;
          border-radius: 50px;
          width: 100px;
          height: 31px;
          font-size: 16px;
      }
  </style>
        </head>
        
        <body>
            <div id="box1">
                <div id="radio">
                    <form action="#" id="form">
                        <h1 style="text-align: center;color:balck;">立即登录</h1>
                        <p>&nbsp;&nbsp;邮箱:&nbsp;&nbsp;&nbsp;<input id="email" type="text"><label id="name_trip"></label></p>
                        <p>&nbsp;&nbsp;&nbsp;密码:<input id="password" type="password"><label id="password_trip"></label></p>
                        </br>
                        <a href="#" id="a">忘记密码？</a>
                        </br></br>
                        <div style="text-align: center;margin-top: 30px;">
                            <input type="submit" class="button" value="登录" onclick="check()">
                            <input type="button" class="button" onclick='location.href=("register.html")' value="注册">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body> 
    <script language="javascript" type="text/javascript">
         document.getElementById("b2").onclick = function click(){
              window.location.href="register.html";
            }
        document.getElementById("a").onclick = function click(){
             window.location.href="register.html";
            }
            function check() {
            var inputEmail = document.getElementById("email");
            // 获取输入内容
            var uEmail = inputEmail.value;
            // 检测邮箱格式
            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
                alert("邮箱不合法");
                return false;
            }

            //获取用户名输入项
            var userPwd = document.getElementById("password");
            var uPWD = userPwd.value;
            if (uPWD.length < 6 || uPWD.length >= 15) {
                alert("密码长度需要大于6位小于15位");
                return false;
            }
            // 内容判断
            var reg = new RegExp(/^[A-Za-z0-9]+$/);
            if (!reg.test(uPWD)) {
                alert("密码要包含数字字母!!");
                return false;
            }

            window.open("photo.html"); 
        }

     </script>

</html>

 

3.登录成功后跳转至照片墙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100%;
            height: 50px;
            background: rgba(124, 58, 58, 0.966);
        }
        #div2 {
            background-image: url(1.jpg);
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background-color: #fff;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }
        #photo_box{
            width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: 200px auto;
            transform-style: preserve-3d;
            transform: rotateX(-5deg) rotateY(0deg);
            animation: run 30s linear infinite;
        }

        #photo_box img{
            width: 250px;
            height: 350px;
            border: 5px solid #ccc;
            border-radius: 5px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #photo_box img:nth-child(1){
            transform: rotateY(0deg) translateZ(500px);
        }
        #photo_box img:nth-child(2){
            transform: rotateY(36deg) translateZ(500px);
        }
        #photo_box img:nth-child(3){
            transform: rotateY(72deg) translateZ(500px);
        }
        #photo_box img:nth-child(4){
            transform: rotateY(108deg) translateZ(500px);
        }
        #photo_box img:nth-child(5){
            transform: rotateY(144deg) translateZ(500px);
        }
        #photo_box img:nth-child(6){
            transform: rotateY(180deg) translateZ(500px);
        }
        #photo_box img:nth-child(7){
            transform: rotateY(216deg) translateZ(500px);
        }
        #photo_box img:nth-child(8){
            transform: rotateY(252deg) translateZ(500px);
        }
        #photo_box img:nth-child(9){
            transform: rotateY(288deg) translateZ(500px);
        }
        #photo_box img:nth-child(10){
            transform: rotateY(324deg) translateZ(500px);
        }
        #photo_box img:nth-child(11){
            transform: rotateY(360deg) translateZ(500px);
        }

            /*采用@keyframes 规则创建run动画。*/
        @keyframes run {
            0%{transform: rotateX(0deg) rotateY(0deg);
            }
            25%{transform: rotateX(10deg) rotateY(90deg);
            }
            50%{transform: rotateX(0deg) rotateY(180deg);
            }
            75%{transform: rotateX(-10deg) rotateY(270deg);
            }
            100%{transform: rotateX(0deg) rotateY(360deg);
            }
        }
        #text1 {
            float: left;
            color:#fff;
            width: 150px;
            padding:12px 0;
            height: 50px;
        }
        #text2 {
            float: right;
            width: 100px;
            color:#fff;
            padding:12px 0;
            height: 50px;
        }
        #text3 {
            float: right;
            width: 100px;
            color:#fff;
            padding:12px 0;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="text1">欢迎登录！</div>
        <div id="text2" onclick="outclick()" >退出</div>
        <div id="text3">个人信息</div>
    </div>
    <div id="div2">
        <div id="photo_box">
            <img src="image.jpg">
            <img src="image2.jpg">
            <img src="image3.jpg">
            <img src="image4.jpg">
            <img src="image5.jpg">
            <img src="image6.jpg">
            <img src="image7.jpg">
            <img src="image8.jpg">
            <img src="image9.jpg">
            <img src="image10.jpg">
            <img src="image11.jpg">
        </div>
    </div>

    
</body>
<script>
    var name=localStorage.getItem("username");
    var div1=document.getElementById("text1");
    function outclick() {
        localStorage.clear();
        window.location.href="登录.html";
    }
</script>
</html>

 

li-chloe
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
黑色html5个人相册模板下载
08-21
HTML5个人相册模板是一种基于最新网页技术构建的交互式展示平台，主要用于展示个人照片、作品集或项目。本模板采用黑色主题，营造出一种高端、专业的视觉效果，适合摄影师、设计师或者任何希望通过互联网分享自己...
HTML中的登录页面 登录页面带头像标志的方法
weixin_72303943的博客
06-24 1742
登录页面带头像标志的方法
通过网址访问HTML文件,你知道从你打开浏览器输入网址，到网页通过浏览器展现在你面前的背后发生了什么吗？...
weixin_39639643的博客
06-16 801
前言这两天总看到这么一个问题“就是浏览器打开网页的背后都发生了什么吗？”虽然自己也不是大佬，也是菜鸟一枚，那我就根据我的一点总结经验，来说一说这个都发生了什么，希望能对大家有帮助！我觉的这个问题可以分为三部分:1.IP的查找2.HTTP的请求和响应3.浏览器的解析那我们来分别说说这三部分都包括了哪些一、IP的查找IP的查找里也分为很多小步骤ip格式的验证我们会想这样一个场景，就是我们正常的输入网址...
SpringBoot浏览器直接访问html
weixin_30576859的博客
03-02 1326
在resources文件夹或与其并列的文件夹下建立public文件夹,在public文件夹下的html文件可以通过浏览器中输入文件+后缀名的方式直接访问的.一、public文件夹，就相当于在eclipse的web项目中的web-inf文件夹外的文件，是不需要通过服务器内部进行访问的。二、templates文件夹，是放置模板文件的，因此需要视图解析器来解析它。所以必须通过服务器内部进行访问，也就...
html按钮载入图片,为HTML添加图片登录按钮
weixin_36352415的博客
06-03 682
效果1：css代码.pic {position:relative; background:#CCC; margin:10px;}.pic span {display:block;border:1px solid #333;background:#FFF;position:relative;padding: 3px;}.right {/*...Button1.Attributes.Add("...
php添加浏览器访问不了图片,我把图片上传到服务器，不知道怎么在浏览器访问这张图片...
weixin_28716217的博客
03-27 195
mui.init();body {font-family: "Helvetica Neue", Helvetica, sans-serif;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background: #E6E6E6;margin: 0px;}var files = [];var i = 1,gentry = null,w = null;var...
HTML超级炫酷相册源码.zip
12-22
总之，HTML超级炫酷相册源码是一个综合性的项目，涵盖了前端开发的基本技术，包括HTML、CSS和JavaScript的使用。通过学习和理解这个源码，开发者不仅可以掌握网页布局和样式设计，还能了解到如何用JavaScript实现...
个人相册图片墙HTML源码
03-25
【个人相册图片墙HTML源码】是一种网页设计的模板，用于展示个人照片或收藏的图片，具有动态效果。此源码的特点在于其纯静态的性质，这意味着它不依赖任何服务器端的编程语言，如PHP、Java或Python，而是完全通过...
个人主页相册模板
01-22
8. **实施步骤**：在使用此个人主页相册模板时，用户通常需要将模板文件上传到服务器，然后在HTML、CSS和JavaScript代码中进行必要的个性化设置。如果具备编程知识，可以对模板进行更深入的定制；如果不熟悉代码，也...
个人介绍相册组件网页模板
01-14
【个人介绍相册组件网页模板】是一个专门为展示个人简历、作品集或相册设计的网页模板，它结合了“个人介绍”、“相册”、“组件”和“网页模板”的核心概念，旨在帮助用户轻松创建一个专业且具有吸引力的在线个人...
HTML5+CSS3 漂亮的个性相册
07-31
HTML5+CSS3 漂亮的个性相册，HTML5+CSS3 漂亮的个性相册.zip 解 压 密 码 [www.0html.com]
初学html第六篇章之项目展示《个人相册》
weixin_44703686的博客
06-09 314
通过接近两周的学习，不仅对html学习有了深刻的理解，了解了其基本属性，还对css的布局和js的框架都有了不同的认识，相信对于以后的学习生活来说，hui'you
手把手教你基于HTML、CSS搭建我的相册（上）
热门推荐
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
手把手教你基于HTML、CSS搭建我的相册（下）
官方推荐
03-22 1万+
利用HTML、CSS搭建我的相册
微信小程序——个人相册（前端）
weixin_55245556的博客
06-21 1803
提供了一个简单易用的相册功能。用户可以方便地上传照片、创建相册、查看照片信息等等。其次，我采用了适当的设计和布局，使得小程序界面美观而且用户友好。我尽量减少了复杂的操作流程，让用户能够轻松地浏览和管理他们的照片。同时，我也在界面上保持了一定的一致性，使得用户可以很快熟悉和掌握小程序的使用方式。然而，也存在一些需要改进的地方。首先，我认识到在小程序的功能方面还有一些局限性。
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 1万+
web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单
html5+css3个人相册网页制作
m0_52204142的博客
06-09 4493
一、登录界面设计 使用正则表达式验证邮箱且密码长度至少为6位且为字母与数字的组合，如果输入框为空输出提示信息，能够提取localStorage中存的数据比较验证。 正则表达式验证邮箱： 邮箱的正则表达式为：/^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/ 验证函数： function jd(){ var y=document.getElementById("email").value; var reg = /^(
HTML实现3D相册
最新发布
兔子王
05-11 3万+
本期小编给大家推荐一个炫酷的3D相册，可以更换照片哦，一起来看看吧~
分享68个Html相册模板，总有一款适合您
zy0412326的专栏
02-29 816
metro图片信息展示响应式网页模板。数字解决方案图片展示响应式网页模板。图片创作幻灯片展示响应式网站模板。专业摄影师展示动态响应式网页模板。不规则图片列表展示响应式网页模板。红绿图片展示动态响应式网页模板。世界建筑设计展示响应式网页模板。黑色分类摄影图库响应式网页模板。图文企业展示动态响应式网站模板。简洁创意展示动态响应式网页模板。特别时刻摄影展示响应式网页模板。摄影相片展示介绍响应式网页模板。图片说明列表展示响应式网站模板。个人图库展示介绍响应式网页模板。下移图片列表展示响应式网页模板。
HTML+CSS+JS响应式个人相册博客源码
"该资源是一个综合性的Web前端学习材料，主要涵盖HTML5、CSS和JavaScript技术，用于创建响应式个人相册博客网站。适合学生作为期末大作业或课程设计使用，提供多种主题的网页模板，如个人、美食、公司等。资源包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值