弹出登录页面的代码(点击弹出登录框代码)
如何在html网页上点击按钮弹出登陆窗口(登陆窗口里面的代码如何与数据库相连，窗口是浮动的)要代码
1、确认无误后，打开python编辑器pycharm，然后新建一个文件，叫做tkinter_t.py。
2、内容编辑完毕，确认无误后，点击pycharm编辑器最上方的run选项卡。然后再点击下方的run选项。
3、然后会弹出一个窗口，让你选择需要运行的python文件，选择刚才创建的tkinter_t.py，然后就会开始执行。弹出我们的测试窗口。
4、继续在基础上进行优化。优化后的命令总共分两段。
5、首先用Tk()这个模块创建一个窗口windows，然后定义一个按钮button，按钮的名称是press，按下去以后的响应命令command是刚才定义的reply函数。
6、代码确认无误后，点击pycharm页面右上角的tkinter_t.py文件名旁边的绿色三角按钮，开始运行代码。
7、刚创建的窗口是个很小的窗口，只显示了一个按钮的高度。
用java写一个登陆界面代码。
概述
具体框架使用jframe，文本框组件：JTextField；密码框组件：JPasswordField；标签组件：JLabel；复选框组件：JCheckBox；单选框组件：JRadioButton；按钮组件JButton。
登录界面：
代码实例
import javax.swing.*;
import java.awt.*; ? //导入必要的包
public class denglu extends JFrame{
JTextField jTextField ;//定义文本框组件
JPasswordField jPasswordField;//定义密码框组件
JLabel jLabel1,jLabel2;
JPanel jp1,jp2,jp3;
JButton jb1,jb2; //创建按钮
public denglu(){
jTextField = new JTextField(12);
jPasswordField = new JPasswordField(13);
jLabel1 = new JLabel("用户名");
jLabel2 = new JLabel("密码");
jb1 = new JButton("确认");
jb2 = new JButton("取消");
jp1 = new JPanel();
jp2 = new JPanel();
jp3 = new JPanel();
//设置布局
this.setLayout(new GridLayout(3,1));
jp1.add(jLabel1);
jp1.add(jTextField);//第一块面板添加用户名和文本框
jp2.add(jLabel2);
jp2.add(jPasswordField);//第二块面板添加密码和密码输入框
jp3.add(jb1);
jp3.add(jb2); //第三块面板添加确认和取消
// ? ? ? ?jp3.setLayout(new FlowLayout()); ?//因为JPanel默认布局方式为FlowLayout，所以可以注销这段代码.
this.add(jp1);
this.add(jp2);
this.add(jp3); ?//将三块面板添加到登陆框上面
//设置显示
this.setSize(300, 200);
//this.pack();
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
this.setTitle("登陆");
}
public static void main(String[] args){
new denglu();
}
}
拓展内容
java swing包
Swing 是一个为Java设计的GUI工具包。
Swing是JAVA基础类的一部分。
Swing包括了图形用户界面（GUI）器件如：文本框，按钮，分隔窗格和表。
Swing提供许多比AWT更好的屏幕显示元素。它们用纯Java写成，所以同Java本身一样可以跨平台运行，这一点不像AWT。它们是JFC的一部分。它们支持可更换的面板和主题（各种操作系统默认的特有主题），然而不是真的使用原生平台提供的设备，而是仅仅在表面上模仿它们。这意味着你可以在任意平台上使用JAVA支持的任意面板。轻量级组件的缺点则是执行速度较慢，优点就是可以在所有平台上采用统一的行为。
概念解析：
JFrame?– java的GUI程序的基本思路是以JFrame为基础，它是屏幕上window的对象，能够最大化、最小化、关闭。
JPanel?– Java图形用户界面(GUI)工具包swing中的面板容器类，包含在javax.swing 包中，可以进行嵌套，功能是对窗体中具有相同逻辑功能的组件进行组合，是一种轻量级容器，可以加入到JFrame窗体中。。
JLabel?– JLabel 对象可以显示文本、图像或同时显示二者。可以通过设置垂直和水平对齐方式，指定标签显示区中标签内容在何处对齐。默认情况下，标签在其显示区内垂直居中对齐。默认情况下，只显示文本的标签是开始边对齐；而只显示图像的标签则水平居中对齐。
JTextField?–一个轻量级组件，它允许编辑单行文本。
JPasswordField?– 允许我们输入了一行字像输入框，但隐藏星号(*) 或点创建密码(密码)
JButton?– JButton 类的实例。用于创建按钮类似实例中的 "Login"。
如何使用JSP来实现百度的登录弹出框？？
使用JSP来实现百度的登录弹出框：
核心代码：
html
head
? title/title
? script type="text/javascript"
? ? ? function showLogin() {
? ? ? ? ? var loginDiv = document.getElementById("loginDiv");
? ? ? ? ? var zhezhao = document.getElementById("zhezhao");
? ? ? ? ? var clientx = document.documentElement.clientWidth;
? ? ? ? ? var clienty = document.documentElement.clientHeight;
? ? ? ? ? var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2;
? ? ? ? ? var t_margin = (clienty - parseInt(loginDiv.style.height)-200) / 2
? ? ? ? ? loginDiv.style.left = l_margin + "px";
? ? ? ? ? loginDiv.style.top = t_margin +"px";
? ? ? ? ? loginDiv.style.display = "block";
? ? ? ? ? zhezhao.style.display = "block";
? ? ? }
? ? ? function hidLogin() {
? ? ? ? ? var loginDiv = document.getElementById("loginDiv");
? ? ? ? ? var zhezhao = document.getElementById("zhezhao");
? ? ? ? ? loginDiv.style.display = "none";
? ? ? ? ? zhezhao.style.display = "none";
? ? ? }
? ? ? function titleMove() {
? ? ? ? ? var moveable = true;
? ? ? ? ? var loginDiv = document.getElementById("loginDiv");
? ? ? ? ? //以下变量提前设置好 ? ? ? ? ? ? ? ? ? ? ? ?var clientX = window.event.clientX;
? ? ? ? ? var clientY = window.event.clientY;
? ? ? ? ? var moveTop = parseInt(loginDiv.style.top);
? ? ? ? ? var moveLeft = parseInt(loginDiv.style.left);
? ? ? ? ? document.onmousemove = function MouseMove() {
? ? ? ? ? ? ? if (moveable) {
? ? ? ? ? ? ? ? ? var y = moveTop + window.event.clientY - clientY;
? ? ? ? ? ? ? ? ? var x = moveLeft + window.event.clientX - clientX;
? ? ? ? ? ? ? ? ? if (x 0 y 0) {
? ? ? ? ? ? ? ? ? ? ? loginDiv.style.top = y + "px";
? ? ? ? ? ? ? ? ? ? ? loginDiv.style.left = x + "px";
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? document.onmouseup = function Mouseup() {
? ? ? ? ? ? ? moveable = false;
? ? ? ? ? }
? ? ? }
? /script
/head
body
!--Main start z-index:0--
div id="Main" style="position:absolute;z-index:0;"
a href="javascript:showLogin()"登陆/a
/div
!--Main start z-index:0--
!--loginDiv start :z-index:2--
div id="loginDiv" style="background-color:white;width:300px;height:150px;border:1px solid blue;z-index:2;display:none;position:absolute;border-top:none"
? div onmousedown="titleMove()" id="login_title" style="width:300px;height:25px;background-color:Blue;border:1px solid silver;border-left:none;border-right:none"
? ? ? !--img src="../images/close.jpg" style="float:right" onclick="hidLogin()"/--
? ? ? a href="javascript:hidLogin()" style="float:right;text-decoration:none;color:white;margin-right:2px;font-size:20px"×/a
? /div
? table style="clear:right;width:298px;height:115px;text-align:right;margin-top:10px;"
? ? ? trtd用户名：/tdtdinput type="text" style="width:180px;" //tdtd ?/td/tr
? ? ? trtd密码:/tdtdinput type="text" ?style="width:180px;" //tdtd ?/td/tr
? ? ? trtdbr //tdtd/td/tr
? /table
/div
!--loginDiv end :z-index:2--
!--zhezhao start: z-index:1--
div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:100%;background-color:silver;display:none;opacity:.5;"
!--zhezhao end--
/div
/body
/html
运行效果：
如何实现如点百度“登陆”时弹出登陆框（网页制作）
最方便的实现方式是：
1、在要打开登录框的页面创建一个div，设置div的样式表z-index为本页面最大的，以及设置为居中，调整其大小并将其隐藏；
2、创建一个登录的页面，页面中内容不超过div的大小（也可以部分页面，都写在上一个jsp中，但如果别的页面也需要用就会写很多个了）；
3、在有登录按钮的页面，设置登录按钮的事件，点击后弹出div并嵌套登录的页面。
下面为示例代码：
login.jsp
style
.loginDiv?{?width:?400px;?height:?450px;?}
/style
center
div?class="loginDiv"
from
????账号：input?type='text'?id='name'?/br
????账号：input?type='password'?id='pwd'?/br
????button?type='submit'登录/button
/form
/center
/div
other.jsp
#loginDiv?{?width:?400px;?height:?450px;?z-index:?99999;?}
script
????//jQuery语言
????$(
????????$('#loginDiv').hide();
????????$('#btnLogin').click(function()?{
??????????????$('#loginDiv').dialog({
????????????????width:?400,
????????????????height:?450,
????????????????modal:?true,
????????????????resizable:?false,
????????????????title:?dialogTitle,
????????????????close:?function(e,?u)?{
????????????????????$('#loginDiv').empty();
????????????????????$(this).dialog("destroy");
??????????????});
?????????});
?????);
/script
button?id='btnLogin'?type='button'登录/button
div?id='loginDiv'
????iframe?url='login.jsp/iframe
????iframe?style="border:?0;?width:?100%;?height:?100%;"/iframe
/div
jsp登陆界面源代码
1、login.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录页面/title
/head
body
form name="loginForm" method="post" action="judgeUser.jsp"
table
tr
td用户名:input type="text" name="userName" id="userName"/td
/tr
tr
td密码:input type="password" name="password" id="password"/td
/tr
tr
tdinput type="submit" value="登录" style="background-color:pink" input
type="reset" value="重置" style="background-color:red"/td
/tr
/table
/form
/body
/html
2、judge.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title身份验证/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc") password.equals("123")) {
3、afterLogin.jsp文件
%
jsp:forward page="afterLogin.jsp"
jsp:param name="userName" value="%=name%"/
/jsp:forward
%
}
else {
%
jsp:forward page="login.jsp"/
%
}
%
/body
/html
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录成功/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%
/body
/html
扩展资料：
java web登录界面源代码：
1、Data_uil.java文件
import java.sql.*;
public class Data_uil
{
public? Connection getConnection()
{
try{
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
}catch(ClassNotFoundException e)
{
e.printStackTrace();
}
String user="***";
String password="***";
String url="jdbc:sqlserver://127.0.0.1:1433;DatabaseName=***";
Connection con=null;
try{
con=DriverManager.getConnection(url,user,password);
}catch(SQLException e)
{
e.printStackTrace();
}
return con;
}
public? String selectPassword(String username)
{
Connection connection=getConnection();
String sql="select *from login where username=?";
PreparedStatement preparedStatement=null;
ResultSet result=null;
String password=null;
try{
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,username);
result=preparedStatement.executeQuery();//可执行的? ? ?查询
if(result.next())
password=result.getString("password");
}catch(SQLException e){
e.printStackTrace();
}finally
{
close(preparedStatement);
close(result);
close(connection);
}
System.out.println("找到的数据库密码为："+password);
return password;?
}
public? void close (Connection con)
{
try{
if(con!=null)
{
con.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public? void close (PreparedStatement preparedStatement)
{
try{
if(preparedStatement!=null)
{
preparedStatement.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public? void close(ResultSet resultSet)
{
try{
if(resultSet!=null)
{
resultSet.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
}
2、login_check.jsp:文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title验证用户密码/title
/head
body
jsp:useBean id="util" class="util.Data_uil" scope="page" /
%
String username=(String)request.getParameter("username");
String password=(String)request.getParameter("password");
if(username==null||"".equals(username))
{
out.print("script language='javaScript' alert('用户名不能为空');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else
{
System.out.println("输入的用户名:"+username);
String passwordInDataBase=util.selectPassword(username);
System.out.println("密码："+passwordInDataBase);
if(passwordInDataBase==null||"".equals(passwordInDataBase))
{
out.print("script language='javaScript' alert('用户名不存在');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else if(passwordInDataBase.equals(password))
{
out.print("script language='javaScript' alert('登录成功');/script");
response.setHeader("refresh", "0;url=loginSucces.jsp");
}
else
{
out.print("script language='javaScript' alert('密码错误');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
}
%
/body
/html
3、loginSucces.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
titleInsert title here/title
/head
body
hr size="10" width="26%" align="left" color="green"
font size="6" color="red" 登录成功 /font
hr size="10" width="26%" align="left" color="green"
/body
/html
4、user_login.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
title登录界面/title
/head
body? background="C:\Users\win8\workspace\Login\image\9dcbdc339e72a5663b5c289fb5573c13_10.jpg"
center
brbrbrbrbrbr
h1 style="color:yellow"Login/h1
br
form name="loginForm" action="login_check.jsp" method="post"?
table Border="0"
tr
td账号/td
tdinput type="text" name="username"/td
/tr
tr
td密码/td
tdinput type="password" name="password"
/td
/tr
/table
br
input type="submit" value="登录" style="color:#BC8F8F"
/form
/center
/body
/html