login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">
    <style type="text/css">

   .Button {
    width: 300px;
    font-size: 15px;
    color: black;
   
    
    text-align: center;
    background-color:#FF6A6A;
    border-color: red;
    border-width: 1px;
}




        .code
        {
            background-image:url(code.jpg);
            font-family:Arial;
            font-style:italic;
            color:Red;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
        }

        .unchanged
        {
           
            border-color: #844200;
    border-width: 1px;
        }
        a{
            text-decoration: none;
        }
    </style>
 
 


    <script language="javascript" type="text/javascript">
     var code ; //在全局 定义验证码
     function createCode()
     { 
       code = "";
       var codeLength = 4;//验证码的长度
       var checkCode = document.getElementById("checkCode");
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的
       for(var i=0;i<codeLength;i++)
       {
       var charIndex = Math.floor(Math.random()*36);
       code +=selectChar[charIndex];
       }
       if(checkCode)
       {
         checkCode.className="code";
         checkCode.value = code;
       }
     }
      function validate ()
     {
         var inputCode = document.getElementById("input1").value;
         if(inputCode.length <=0)
         {
             document.getElementById("yzm").innerText="请输入验证码!";
             return false;
         }
         else if(inputCode != code )
         {
          document.getElementById("yzm").innerText="验证码输入错误!";
            createCode();//刷新验证码
            return false;
         }

         else
         {
            
          window.location.href="login.php";//普通用户登录后网址
         
        }
        
       }
    </script>
    
</head>
<body  style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;">
  <!--顶部-->
  <div class="top">
    
      <h2 style="font-family:KaiTi">欢迎登录</h2>
  </div>
<!--    中间区域的主体,左右撑开-->
    <div class="main">
<!--居中的主体区域-->
        <div class="main-content">
<!-- 登录的白盒子-->
            <div class="login">
               <h2>橘子巷<span><a href="register.html" style="color=#e75858">立即注册</a></span></h2>

                
                            <div class="panel-body">
                                <form method="post" action="login.php">
                                    <div class="form-group">
                                        用户名:
                                        <input type="text"  id="name" name="name" placeholder="用户名"required placeholder autofocus>
                                    </div>
                                    <div class="form-group">&nbsp;&nbsp;&nbsp;&nbsp;码:
                                        <input type="password"  id="password" name="password" placeholder="密码">
                                    </div>
                                  
                                    <div>
                                     验证码:  <input  type="text"   id="input1" placeholder="此项必填哦"/></div>
                                       <div>
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  />
<div>
    <label id="yzm" style="color:red;margin-left:15px"></label>
                                    </div>

                <div class="auto-login">
                    <label><input type="checkbox"><span>自动登录</span></label>
                    
                </div>
             
                 
                <div>
     <input id="Button1"  onclick="console.log(validate())" class="Button" type="submit" value="登录" />
     </div>
                 <div class="auto-login">
                    <label><span><a href="gllogin.html" style="float: left">管理员?</a></span></label>
                    <a href="main.php">游客?</a>
                </div> 
                   

                
            </div>
          </form>
        </div>
    </div>
      </div>
    </div>
<!--    居中的底部盒子-->
    <div class="bottom">
    <ul>
        <li><a herf="">关于我们</a><span |></span></li>
        <li><a herf="">联系我们</a><span |></span></li>
        <li><a herf="">人才招聘</a><span |></span></li>
        <li><a herf="">商家入驻</a><span |></span></li>
        <li><a herf="">广告服务</a><span |></span></li>
        <li><a herf="">手机京东</a><span |></span></li>
        <li><a herf="">友情链接</a><span |></span></li>
        <li><a herf="">销售联盟</a><span |></span></li>
        <li><a herf="">橘子社区</a><span |></span></li>
        <li><a herf="">橘子公益</a><span |></span></li>
        <li><a herf="">English Site</a><span |></span></li>
    </ul>
    <p>
        Copyright&copy;石家庄铁道大学
    </p>
</div>
</body>
</html>
 

login.php

  <?php
     $name = $_POST['name'];
        $password = $_POST['password'];
 
    // .连接数据库
 
    // .防止中文乱码
    $con=mysqli_connect("localhost","root","123456","php");
          // .拼接sql语句,取出信息
  
     $sql = "SELECT * FROM login WHERE username ='{$name}' and password='{$password}'";
      $rst=mysqli_query( $con,$sql);
    $row=mysqli_fetch_assoc($rst);

 if($row){
     echo "<script> alert('登录成功!');
                        window.location='main2.php'; //跳转      
                    </script>";
 }
     
     else
     {
  
           echo "<script> alert('用户不存在或密码错误!');
                   window.history.back(); //返回上一页
                    </script>";
         }

           
                   
           
 
        ?>  

 

 

管理员登录

gllogin.htmll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">
    <style type="text/css">

   .Button {
    width: 300px;
    font-size: 15px;
    color: black;
   
    
    text-align: center;
    background-color:#FF6A6A;
    border-color: red;
    border-width: 1px;
}




        .code
        {
            background-image:url(code.jpg);
            font-family:Arial;
            font-style:italic;
            color:Red;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
        }

        .unchanged
        {
           
            border-color: #844200;
    border-width: 1px;
        }
    </style>

    <script language="javascript" type="text/javascript">

    function check() {
        var name = document.getElementById("name").value;
      var password = document.getElementById("password").value;
        if (name == 'juzipi'&&password=='123456') {
            alert("登入成功");
            window.document.f.action = "main3.php";//管理员首页
            window.document.f.submit();
        } else {
            alert("用户名或密码错误");
        }
    }

    
    </script>
    
</head>
<body  style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;">
  <!--顶部-->
  <div class="top">
    
      <h2 style="font-family:KaiTi">欢迎管理员登录</h2>
  </div>
<!--    中间区域的主体,左右撑开-->
    <div class="main">
<!--居中的主体区域-->
        <div class="main-content">
<!-- 登录的白盒子-->
            <div class="login">
               <h2>橘子巷</h2>

                
                            <div class="panel-body">
                                <form name="f" action="" >
                                    <div class="form-group">
                                        用户名:
                                        <input type="text"  id="name" name="name" placeholder="用户名"required placeholder autofocus>
                                    </div>
                                    <p> </p>
                                    <div class="form-group">&nbsp;&nbsp;&nbsp;&nbsp;码:
                                        <input type="password"  id="password" name="password" placeholder="密码">
                                    </div>
                                  
                                   
                <div class="auto-login">
                    <label><input type="checkbox"><span>自动登录</span></label>
                    <a href="forget.html">忘记密码</a>
                </div>
             
                 <p></p>
                <div >
    <INPUT TYPE="button"  class="Button"value="登录" onclick="check()">
     </div>
          </form>
        </div>
    </div>
    </div>
    </div>
<!--    居中的底部盒子-->
    <div class="bottom">
    <ul>
        <li><a herf="">关于我们</a><span |></span></li>
        <li><a herf="">联系我们</a><span |></span></li>
        <li><a herf="">人才招聘</a><span |></span></li>
        <li><a herf="">商家入驻</a><span |></span></li>
        <li><a herf="">广告服务</a><span |></span></li>
        <li><a herf="">手机京东</a><span |></span></li>
        <li><a herf="">友情链接</a><span |></span></li>
        <li><a herf="">销售联盟</a><span |></span></li>
        <li><a herf="">橘子社区</a><span |></span></li>
        <li><a herf="">橘子公益</a><span |></span></li>
        <li><a herf="">English Site</a><span |></span></li>
    </ul>
    <p>
        Copyright&copy;石家庄铁道大学
    </p>
</div>
</body>
</html>
 

 

regiser.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
            form{
                width: 800px;
                height: 700px;
               float: right;
                margin: 20px;
             
            }
 
          
 
             .a1{
                
                  font-family:"幼圆";/*设置字体*/
             color: #00000;
      text-decoration:none;
      font-size:20px;/*设置字体大小*/
      font-weight:10px;/*调整字体粗细*/
             }
 
             .a2{
               
                font-family:"幼圆";/*设置字体*/
             color: #00000;
      text-decoration:none;
      font-size:20px;/*设置字体大小*/
      font-weight:10px;/*调整字体粗细*/
            }
 .ziti{
    font-family:"幼圆";/*设置字体*/
             color: #00000;
      text-decoration:none;
      font-size:20px;/*设置字体大小*/
      font-weight:10px;/*调整字体粗细*/
 }
 
            input,
            textarea
            {
            
            }
 
            button{
                
                background-color:#f3e1d0;
                 width: 300px;
                 height: 30px;
                 font-size: 15px;
                 color: black;
    
                  text-align: center;
     
     
            }
 
            span#as:hover input{
                width: 300px;
                height: 40px;
            }
  
            
    </style>
<script type="text/javascript" >

 


   
  
     function  check() {
        
        
          var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); 
      var obj = document.getElementById("email");
          var re =/^1[0-9]{10}/;
          var phone=document.getElementById("phone");
          var re1 = /^[a-zA-z0-9]\w{3,15}/;
           var password=document.getElementById("password");
         if(obj.value === ""||phone.value==""){ 
           alert("输入不能为空!");
           return false;
         }else if(!reg.test(obj.value)){ 
           alert("邮箱不通过!");
           return false;
         }else{
        if(!re.test(phone.value))
        {
            alert("手机号不通过!");
            return false;
        } else{
           alert("通过!");
         window.document.f.action = "login.html";
           window.document.f.submit();
           return true;
       }
       }
         }
       
  </script>






</head>
 
<body  style="width:1520px;height:752px; background: url(4.jpg); background-size:contain ;text-align: center;">
  <!--顶部-->         
 
        <form method="post" action="act.php?action=adduser">
            
            <h2  >用户注册:</h2>
 
            <hr>
             
            <p class="ziti">用户昵称:<input type="text"   name="name"  class="a1"><hr></p>
 
            <p class="ziti">注册邮箱:<input type="text"   name="email" id="email" class="a1"><hr></p>
          <p class="ziti">手机号:&nbsp;&nbsp;&nbsp;<input type="phone"  name="phone" id="phone" class="a1"><hr></p>
            <p class="ziti">密码: <input type="password" id="password" name="password" class="a2"></span><hr></p>
 
            <p class="ziti">性别:<span class="a2">男<input type="radio" name="sex" checked><input type="radio" name="sex"> </span><hr>
             </p>
 
           
            <div class=" text-align: center">

            <button type="submit"   onclick="check()"   >立即注册</button>
 </div>
 
 
        </form>
 
</body>
 
</html>

 

版权声明:本文为zrsweheart原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/rongzhang/p/16137874.html