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

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

  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>密码提示:666666p>
    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">5span><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

转载于:https://www.cnblogs.com/tanxiang6690/p/6837928.html

你可能感兴趣的:(一个简单的登陆注册的页面)