android相册代码 web相册代码

转载

cnolnic 2023-05-22 16:04:35

该相册制作分为登录、注册和主页面(由于后端没有实现，登录注册只有一些简单的判断），代码如下

（1）登录界面的HTML

<!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>欢迎登陆</title>
    <link rel="stylesheet"  href="xc.css"> 
    <script type="text/javascript" src="dl.js"></script>
</head>
<body>
    <div class="bg">
        <div class="bg2">
            <div class="tp"></div>
        </div>
        <div class="wzbg">
            <h1 style="margin-left: 150px;">立即登录</h1>
            <p class="wz">用户名</p>
            <input class="srk" type="text" id="name">
            <p class="wz">邮箱</p>
            <input class="srk" type="text" id="email">
            <p class="wz">密码 <span>  <a href="zc.html" style="font-size: 15px;">忘记密码？</a></span></p>
            <input class="srk" type="password" id="pw" placeholder="密码长度至少为六位">
            <br>
            <br>
            <br>
            <div><button class="button" type="button" onclick="dL()">登陆</button>    <button class="button" onclick="window.location.href='zc.html'">注册</button></div>
        </div>
    </div>
</body>
</html>

（2）注册界面的HTML

<!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>欢迎注册</title>
    <link rel="stylesheet"  href="xc.css"> 
    <script type="text/javascript" src="zc.js"></script>
</head>
<body>
    <div class="zcbg">
        <div class="bg3">
            <div class="tp1"></div>
        </div>
        <div class="wzbg">
            <h1 style="margin-left: 150px;">立即注册</h1>
            <p class="wz1">邮箱</p>
            <input class="srk1" type="text" id="email_1">
            <p class="wz1">用户名</p>
            <input class="srk1" type="text" id="name_1">
            <p class="wz1">性别</p>
            <input type="radio" style="margin-left: 180px;" >男
            <input type="radio" >女
            <p class="wz1">头像 </p>
            <input class="srk1" type="file" id="tx">
            <p class="wz1">密码 </p>
            <input class="srk1" type="text" id="pw_1" placeholder="密码长度至少为六位，且为数字和字母的组合">
            <p class="wz1">确认密码</p>
            <input class="srk1" type="text" id="pw_2" placeholder="两次密码须一致">
            <br>
            <br>
            <br>
            <div><button class="button1" type="button" onclick="zC()">注册</button></div>
        </div>
        <div class="wzbg1">
            <h1>    已有账号？</h1>
            <p>有账号就登陆吧，好久不见了！</p>
        </div>
        <div class="wzbg2">
            <button class="button2" onclick="window.location.href='dl.html'">登录</button>
        </div>
    </div>
</body>
</html>

（3）主页的HTML

<!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>你好，王佳媛！</title>
    <link rel="stylesheet"  href="xc.css"> 
</head>
<body>
    <div class="xcbg">
        <div class="div11">
            <p class="font">欢迎王佳媛登录！</p>
            <span class="font1">个人信息            <span onclick="window.location.href='dl.html'">退出</span></span>
        </div>
        <div class="xctp">
            <img src="8 (1).jpg" alt="" />
            <img src="8 (2).jpg" alt="" />
            <img src="8 (3).jpg" alt="" />
            <img src="8 (4).jpg" alt="" />
            <img src="8 (5).jpg" alt="" />
            <img src="8 (6).jpg" alt="" />
        </div>
        <audio src="Martin Ermen - River Flows In You.mp3" autoplay="autoplay" loop="loop"></audio>
    </div>
</body>
</html>

（4）登录的js文件

function dL(){
    // var Name1="Null";
    var Name = document.getElementById("name").value;
    // var Name1 = document.getElementById("name1").value;
    var email = document.getElementById("email").value;
    var pw = document.getElementById("pw").value;
    if(Name!="王佳媛"){
        alert("用户名错误，请重新输入或注册！");
    }else if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)){
        alert("邮箱格式不正确！");
    }else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(pw)){
        alert("密码错误！")
    }else {
        alert("登录成功！");
        window.location.href="xc.html"
    }
}

（5）注册的js文件

function zC(){
    var Name1 = (document.getElementById("name_1").value.length);
    var email1 = document.getElementById("email_1").value;
    var pw1 = document.getElementById("pw_1").value;
    var pw2 = document.getElementById("pw_2").value;
    if(Name1>5){
        alert("用户名过长，应不大于五位！");
    }else if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email1)){
        alert("邮箱格式不正确！");
    }else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(pw1)){
        alert("密码格式错误，请重新输入！")
    }else if(pw1!=pw2){
        alert("两次输入的密码不一致，请重新输入！");
    }else{
        alert("注册成功，请返回登录页面进行登录！");
        window.location.href="dl.html"
    }
}

（6）css文件

.bg{
    background-image: url(1.jpg);
    background-size: auto;
    height: 880px;
}
.zcbg{
    background-image: url(2.jpg);
    background-size: auto;
    height: 880px;
}
.xcbg{
    background-image: url(4.jpg);
    background-size: auto;
    height: 880px;
}
.bg2{
    background-color: rgb(243, 215, 215);
    width:1400px;
    height: 680px;
    position: relative;
    top: 100px;
    left:220px;
    border-radius: 100px;
    opacity: 0.8;
}
.bg3{
    background-color: rgb(246, 253, 206);
    width:1400px;
    height: 750px;
    position: relative;
    top: 100px;
    left:220px;
    border-radius: 100px;
    opacity: 0.8;
}
.tp{
    background-image: url(6.jpg);
    width:450px;
    height: 500px;
    position: relative;
    top: 100px;
    left:100px;
    border-radius: 100px;
}
.tp1{
    background-image: url(7.jpg);
    width:450px;
    height: 700px;
    position: relative;
    top: 30px;
    left:100px;
    border-radius: 100px;
    
}
.wzbg{
    height: 500px;
    width: 600px;
    position: absolute;
    top:180px;
    left: 1000px;
}
.wzbg1{
    height: 500px;
    width: 500px;
    position: absolute;
    top:180px;
    left: 450px;
    color: white;
}
.wzbg2{
    height: 100px;
    width: 500px;
    position: absolute;
    top:680px;
    left: 450px;
}
.wz{
    font-size: 20px;
    margin-left: 200px;
    color: rgb(88, 88, 88);
}
.wz1{
    font-size: 15px;
    margin-left: 200px;
    color: rgb(88, 88, 88);
}
.srk{
    background-color: rgb(185, 198, 255);
    border-radius: 15px;
    height: 50px;
    width: 400px;
    margin-left: 20px;
    border: 1px rgb(193, 193, 255) ;
    box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)
}
.srk1{
    background-color: rgb(185, 255, 200);
    border-radius: 10px;
    height: 30px;
    width: 400px;
    margin-left: 20px;
    border: solid 1px rgb(215, 255, 215);
    box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)
}
input[type='text']{
    text-align:center;
}
.button{
    height: 40px;
    width:175px;
    background-color: rgb(147, 189, 190);
    border-radius: 15px;
    margin-left: 23px;
    border: solid 1px rgb(193, 193, 255) ;
    box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)
}
.button1{
    height: 40px;
    width:300px;
    background-color: rgb(179, 209, 255);
    border-radius: 15px;
    margin-left: 80px;
    border: solid 1px rgb(250, 250, 250) ;
    box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)
}
.button2{
    height: 40px;
    width:200px;
    background-color: transparent;
    border-radius: 15px;
    margin-left: 0px;
    border: solid 2px rgb(250, 250, 250) ;
    color: white;
    font-size: 20px;
    box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)
}
.div11{
    height: 50px;
    width: auto;
    background-color: rgb(78, 78, 78);
    color:white;
}
.font{
    float: left;
    position: relative;
    top:2px;
    left: 20px;
}
.font1{
    float: left;
    position: relative;
    top:20px;
    left: 1550px;
}
img{
    width:320px;
    height:480px;
}
.xctp{
    width:420px;
    height:580px;
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    margin:auto;
    transform-style: preserve-3d;
    transition: all 12s;
}
.xctp img{
    position: absolute;
}
.xctp img:nth-child(1){transform: translateZ(500px);}
.xctp img:nth-child(2){transform: rotateY(60deg) translateZ(500px) ;}
.xctp img:nth-child(3){transform: rotateY(120deg) translateZ(500px) ;}
.xctp img:nth-child(4){transform: rotateY(180deg) translateZ(500px) ;}
.xctp img:nth-child(5){transform: rotateY(240deg) translateZ(500px) ;}
.xctp img:nth-child(6){transform: rotateY(300deg) translateZ(500px) ;}
.xctp:hover{
    transform: rotateY(720deg) rotateX(45deg);
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。