js怎么实现多用户注册登录界面

2023-04-25 00:09:01JavaScript030

js怎么实现多用户注册登录界面,第1张

我是这么认为的!js和html只能做客户端的事情，如界面元素布局，表单验证这类的事情。如果只是要这样一个表单，那就太简单了。致于登录验证这样的事，需要后台支持的，数据可能来自数据库，只用js和html是完成不了的。

/**

* 显示一个弹出界面

* @param url

*界面地址，可以使jsp，页也可以是action

* @param params

*需要传递的参数

* @param titleDesc

*页面头描述

* @param width

*页面宽度

* @param height

*页面高度

* @param parentView

*页面所在的父页面

* @param callback

/**

* 显示一个弹出界面

* @param url

*界面地址，可以使jsp，页也可以是action

* @param params

*需要传递的参数

* @param titleDesc

*页面头描述

* @param width

*页面宽度

* @param height

*页面高度

* @param parentView

*页面所在的父页面

* @param callback

*回调函数

function showPage(url, params, titleDesc, width, height, parentView, callback) {

var _win = this

if (!parentView) {

parentView = document

}

lockScreen_showPage(parentView)

var bordercolor = "#336699"// 提示窗口的边框颜色

var showPageDiv = parentView.createElement("div")

showPageDiv.setAttribute("id", "showPageDiv")

showPageDiv.setAttribute("align", "center")

showPageDiv.style.background = "white"

// showPageDiv.style.border = "1px solid " + bordercolor

showPageDiv.style.position = "absolute"

showPageDiv.style.left = "50%"

showPageDiv.style.top = "30%"

showPageDiv.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"

showPageDiv.style.marginLeft = "-225px"

showPageDiv.style.marginTop = -75 + parentView.documentElement.scrollTop + "px"

showPageDiv.style.width = width + "px"

showPageDiv.style.height = height + "px"

showPageDiv.style.textAlign = "center"

showPageDiv.style.lineHeight = "25px"

showPageDiv.style.zIndex = "10031"

var title = parentView.createElement("h4")

title.setAttribute("id", "showPageTitle")

title.setAttribute("align", "right")

title.style.margin = "0"

title.style.padding = "3px"

// title.style.background = bordercolor

title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)"

title.style.opacity = "0.75"

// title.style.border = "1px solid " + bordercolor

title.style.height = "18px"

title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif"

// title.style.color = "white"

title.style.cursor = "pointer"

title.title = titleDesc

title.innerHTML = "<table border='0' width='100%'><tr><td width='85%' align='left'><b id='showPageTitleDesc'>"

+ titleDesc + "</b></td><td id='showPageClose' width='15%' >关闭</td></tr></table>"

var pageBody = parentView.createElement("div")

pageBody.setAttribute("id", "pageBody")

pageBody.style.width = width + "px"

if (navigator.userAgent.indexOf("MSIE 6.0") >0) {// IE6

pageBody.style.height = height - 26 + "px"

} else {// IE8

pageBody.style.height = height - 25 + "px"

}

pageBody.style.position = "absolute"

pageBody.style.left = "0px"

$.post(url, params, function(data) {

showPageDiv.appendChild(title)

showPageDiv.appendChild(pageBody)

parentView.body.appendChild(showPageDiv)

parentView.getElementById("showPageClose").onclick = function() {

closeShowPage(parentView)

if (callback) {

callback.call(_win)

}

$("#pageBody").html(data)

})

}

试试调用这个方法

你意思先在流行的一种注册方式。

参考一个

<html>

<head>

</style>

</head>

<body>

//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）

function sAlert(){

var msgw,msgh,bordercolor

msgw=250//提示窗口的宽度

msgh=100//提示窗口的高度

bordercolor="#336699"//提示窗口的边框颜色

titlecolor="#99CCFF"//提示窗口的标题颜色

//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）

var bgObj=document.createElement("div")//创建一个div对象（背景层）

//定义div属性

bgObj.setAttribute("id","bgDiv")

bgObj.style.position="absolute"

bgObj.style.top="0"

bgObj.style.background="#777"

bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"

bgObj.style.opacity="0.6"

bgObj.style.left="15%"

bgObj.style.width="85%"

bgObj.style.height="100%"

bgObj.style.zIndex = "10000"

document.body.appendChild(bgObj)//在body内添加该div对象

var msgObj=document.createElement("div")//创建一个div对象（提示框层）

//定义div属性，即相当于

msgObj.setAttribute("id","msgDiv")

msgObj.setAttribute("align","center")

msgObj.style.background="white"

msgObj.style.border="1px solid " + bordercolor

msgObj.style.position = "absolute"

msgObj.style.left = "65%"

msgObj.style.top = "50%"

msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"

msgObj.style.marginLeft = "-225px"

msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"

msgObj.style.width = msgw + "px"

msgObj.style.height =msgh + "px"

msgObj.style.textAlign = "center"

msgObj.style.lineHeight ="25px"

msgObj.style.zIndex = "10001"

var title=document.createElement("h4")//创建一个h4对象（提示框标题栏）

//定义h4的属性，即相当于

//<h4 id="msgTitle" align="right" style="margin:0 padding:3px background-color:#336699 filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100) opacity:0.75 border:1px solid #336699 height:18px font:12px Verdana,Geneva,Arial,Helvetica,sans-serif color:white cursor:pointer" onclick="">关闭 </h4>

title.setAttribute("id","msgTitle")

title.setAttribute("align","right")

title.style.margin="0"

title.style.padding="3px"

title.style.background=bordercolor

title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)"

title.style.opacity="0.7"

title.style.border="1px solid " + bordercolor

title.style.height="12px"

title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"

title.style.color="white"

title.style.cursor="pointer"