一个简单的登陆注册的页面

Posted 2020-09-17 tanxiang6690

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的登陆注册的页面相关的知识，希望对你有一定的参考价值。

　　首先声明，这行代码不用于开发。

　　1、login.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<style>
     .box{
         height: 30px;
         width: 300px;
         position: absolute;
         top:50%;
         margin-top: -15px;
         left: 50%;
         margin-left:-150px;
     }
     #user{
         background: #ccc;
         height: 20px;
     }
     #btn{
         background: #fad0af;
         border: none;
         height: 20px;
     }
</style>
<body>
    <div class="box">
        <input type="text" value="" id="user">
        <input type="button" value="登陆" id="btn">
        <p>密码提示：666666</p>
    </div>
    <script>
    window.onload=function(){
        var users=document.getElementById("user");
        var btns=document.getElementById("btn");
        btns.onclick=function(){
            if(users.value == ‘‘){
                alert(‘请输入密码‘);
            } else if(users.value == "666666"){
                window.open(‘success.html‘);
            } else {
                window.open("error.html");
            }
        }
     }
</script>
</body>
</html>

　　2、success.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆成功了</title>
    </head>
    <body>
        <h1>你已经登陆成功了</h1>
    </body>
</html>

　　3、error.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出错页面</title>
</head>
<style>
    .box{
        height: 250px;
        width: 400px;
        border: 1px solid #e0b6a3;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        margin-left: -200px;
        top: 50%;
        margin-top: -150px;
        box-shadow: 2px 2px 10px #AEADAD;
    }
    .title{
        height: 40px;
        width: 400px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        float: left;
        background: #f9c89b;
    }
    .content{
        height: 210px;
        width: 400px;
        line-height: 210px;
        text-align: center;
        background: pink;
        float: left;
        backgroun d: #ded0b3;
    }
    #time{
        font-size: 25px;
        color: red;
        font-weight: bold;
    }
</style>
<body>
    <div class="box">
        <div class="title">亲！错了，继续来</div>
        <div class="content">
            <span id="time">5</span><span>s后自动返回登陆页</span>
        </div>
    </div>
</body>
</html>
<script>
    (function(){
        var times = document.getElementById("time");
        var num=5;
        setInterval(function(){
            num--;
            times.innerHTML = num;
            if(num <= 0){
                window.close();
            }
        }, 1000)
    })();
</script>

　　4、watting

以上是关于一个简单的登陆注册的页面的主要内容，如果未能解决你的问题，请参考以下文章

html怎么做登录注册页面

javascript 网页登陆代码

怎么用flask+mysql来实现一个简单的用户注册和登陆效果的页面

html+css+js实现简单登陆注册页面

javascript页面登陆