用户未登录重定向到登录界面_计算机毕业设计中实现弹出式登录界面

最新推荐文章于 2023-06-16 10:10:40 发布

weixin_39636707

最新推荐文章于 2023-06-16 10:10:40 发布

阅读量608

点赞数

文章标签：用户未登录重定向到登录界面

点击上方“蓝字”，关注我们.

要实现这个功能的大致思路是：

1.首先要在页面上设置一个登录按钮，可以是都行，我们点击这个元素的时候会弹出登录框：

2.其次在页面合适位置制作两个

，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"

3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换

4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
代码如下：

sign.html

span style="box-sizing: border-box;outline: 0px;overflow-wrap: break-word;">html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>signtitle>

<style>

body {

text-align: center;

background-color: burlywood;

}

.signform {

font-family: 微软雅黑;

position: fixed;

background-color: white;

top: 20%;

left: 30%;

width: 500px;

height: 400px;

border-radius: 1em;

text-align: center;

z-index: 999;

}

#registerform {

height: 450px;

}

.signclose {

cursor: pointer;

float: right;

overflow: hidden;

text-align: center;

position: relative;

height: 35px;

width: 35px;

margin-top: 10px;

margin-right: 10px;

}

#registerloading{

position: absolute;

width: 25px;

height: 25px;

left: 410px;

top: 90px;

}

.signinput {

text-align: center;

border-radius: 0.2em;

width: 280px;

height: 45px;

border: none;

background-color:#f2f2f2;

font-size: 28px;

}

.signinput::-webkit-input-placeholder {

font-size: 26px;

}

.userdiv {

position: relative;

margin-top: 80px;

}

.pwddiv {

position: relative;

margin-top: 20px;

}

.postdiv {

position: relative;

margin-top: 20px;

}

.postdiv button {

cursor: pointer;

color: white;

font-size: 26px;

border: none;

border-radius: 0.4em;

width: 280px;

height: 45px;

background-color:#4CAF50;

}

style>

<link rel="stylesheet" href="./sign.css">

head>

<body>

<div>

<button id="displaysign" οnclick="start()">点击登录button>

div>

<div class="signform" id="signform" style="display: none">

<div class="signclose">

<img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">

div>

<div class="userdiv">

<input id="user" class="signinput" type="text" placeholder="用户名" name="user" >

div>

<div class="pwddiv">

<input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd">

div>

<div class="postdiv">

<button>登录button>

div>

<br>

<div class="change" style="color: #4d4d4d">

<p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册a>一个吧p>

div>

<div class="signform" id="registerform" style="display: none">

<div class="signclose">

<img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">

div>

<div class="userdiv">

<input id="registeruser" class="signinput" οnblur="loading()" type="text" placeholder="用户名" name="user">

div>

<img src="image/signloading.gif" style="display: none" id="registerloading">

<div class="pwddiv">

<input id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd">

div>

<div class="pwddiv">

<input id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd">

div>

<div class="postdiv">

<button>注册button>

div>

<br>

<div class="change" style="color: #4d4d4d">

<p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录a>吧p>

div>

body>

<script src="./jquery-3.2.1.min.js">script>

<script src="./signformchange.js">script>

html>

sign.css

/*

* @Author: xshis

* @Date: 2018-05-23 11:45:25

* @Last Modified by: xshis

* @Last Modified time: 2018-05-23 11:45:28

*/

body {

text-align: center;

background-color: burlywood;

}

#displaysign{

position: relative;

top: 80px;

width: 70px;

height: 40px;

}

.signform {

font-family: 微软雅黑;

position: fixed;

background-color: white;

top: 20%;

left: 30%;

width: 500px;

height: 400px;

border-radius: 1em;

text-align: center;

z-index: 999;

}

#registerform {

height: 450px;

}

.signclose {

cursor: pointer;

float: right;

overflow: hidden;

text-align: center;

position: relative;

height: 35px;

width: 35px;

margin-top: 10px;

margin-right: 10px;

}

#registerloading{

position: absolute;

width: 25px;

height: 25px;

left: 410px;

top: 90px;

}

.signinput {

text-align: center;

border-radius: 0.2em;

width: 280px;

height: 45px;

border: none;

background-color:#f2f2f2;

font-size: 28px;

}

.signinput::-webkit-input-placeholder {

font-size: 26px;

}

.userdiv {

position: relative;

margin-top: 80px;

}

.pwddiv {

position: relative;

margin-top: 20px;

}

.postdiv {

position: relative;

margin-top: 20px;

}

.postdiv button {

cursor: pointer;

color: white;

font-size: 26px;

border: none;

border-radius: 0.4em;

width: 280px;

height: 45px;

background-color:#4CAF50;

}

signformchange.js

/*

* @Author: xshis

* @Date: 2018-05-23 11:45:50

* @Last Modified by: xshis

* @Last Modified time: 2018-05-23 11:45:52

*/

$(function ()

{

$('.change a').click(function ()

{

$('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');

});

})

function start() {

document.getElementById('signform').style.display=""

}

function signclose() {

document.getElementById('signform').style.display="none"

document.getElementById('registerform').style.display="none"

}

function loading() {

document.getElementById('registerloading').style.display=""

}

weixin_39636707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户未登录重定向到登录界面_计算机毕业设计中实现弹出式登录界面

点击上方“蓝字”，关注我们.要实现这个功能的大致思路是：1.首先要在页面上设置一个登录按钮，可以是都行，我们点击这个元素的时候会弹出登录框：2.其次在页面合适位置制作两个，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"3.当用户点击登录按钮的时候，通过JS设置登录div的display="...
复制链接

扫一扫