2021-06-10

Posted 2022-01-27 奶油莓果酱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021-06-10相关的知识，希望对你有一定的参考价值。

简单的登录界面设计

<!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>
    <style>
        body
            background-image: url(背景4.jpg) ;
            background-repeat: no-repeat;
            background-size:100%;
        
        div
            width: 400px;
            height: 400px;
            border-radius: 30%;
            background-color: rgba(0,0,0, 0.1);
            position: absolute;
            top: 20%;
            left:38%;
            font-size: x-large;
        
        input
            height: 30px;
            width: 200px;
        
        button
            height: 40px;
            width: 70px;
            border-radius: 15%;
        
    </style>
    
</head>
<body >
    <center>
    <div class="m1">
        <br><br><br><br>
        登录：<input type="text" id="un"  ><br><br>
        密码：<input type="password" id="pwd"><br><br>
        <button id="denlu" >登录</button>
    </div>
    </center>
    <script>
            var reu =/^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]2,4)+$/g;
            var rep =/^[0-9a-zA-Z]+$/g;
            var denlu = document.getElementById("denlu");
            denlu.onclick=function()
                var pwd =document.getElementById("pwd").value;
                if(pwd.length<6)
                    alert("密码长度至少6位!");
                
                if(!rep.test(pwd))
                    alert( '密码只能是数字和字母的组合');
                
                var pwdo=localStorage.getItem("password");
                if(pwd!=pwdo)
                    alert("密码错误！");      
                
                else window.location.href='照片墙.html';
            

        
     </script>
</body>
</html>

效果展示

以上是关于2021-06-10的主要内容，如果未能解决你的问题，请参考以下文章

2021 06/10 words

2021-06-10