DIV图层叠加实例

最新推荐文章于 2023-05-29 11:21:58 发布

原创最新推荐文章于 2023-05-29 11:21:58 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

8 篇文章

订阅专栏

博客提及了信息技术领域的HTML、JS和CSS，它们是前端开发的重要技术，HTML用于构建网页结构，JS实现交互效果，CSS负责页面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<span id="DLname" onclick="XS(1,DL)" style="cursor:pointer;">登录</span>
            <!--登录背景透明-->
            <div id="DLBJ">
            <!--登录窗口-->
                <div id="DL">
                    <table border="0" cellspacing="0" width="450" height="350">
                        <tr height="60">
                             <td colspan="2" align="center" bgcolor="#CCCCCC"><font size="6" color="#000000"><b>登录账号</b></font>
                             <div onclick="XS(2,DL)" style="position:absolute; left:405px; top:5px; cursor:pointer;"><font color="#FFFFFF" size="6">×</font></div>
                             </td>
                        </tr>
                        <tr height="20">
                            <td colspan="2" align="center"><font id="DLCU" color="#FF0000"></font></td>
                        </tr>
                        <tr height="60">
                            <td width="135" align="right"><font size="3" color="#000000"><b>用户名：</b></font></td>
                            <td>
                                <input class="DLinput" type="text" oninput="DLYZ(1)" onclick="cc(2,this,DL)" style="height:25px; font-size:20px" size="12"/>
                                <span class="DLspan"></span>
                            </td>
                        </tr>
                        <tr height="60">
                            <td align="right"><font size="3" color="#000000"><b>密&nbsp;码：</b></font></td>
                            <td>
                                <input class="DLinput" type="password" oninput="DLYZ(2)" onclick="cc(2,this,DL)" style="height:25px; font-size:20px" size="12"/>
                                <span class="DLspan"></span>
                            </td>
                        </tr>
                        <tr height="60">
                            <td align="right"><font size="3" color="#000000"><b>验证码：</b></font></td>
                            <td>
                                <div style="float:left;">
                                    <input class="DLinput" type="text" oninput="DLYZ(3)" onclick="cc(2,this,DL)" style="height:25px; font-size:20px" size="12"/>
                                </div>
                                <div id="YZM"></div>
                                <button onclick="YZ()">看不清楚</button>
                                <span class="DLspan"></span>
                            </td>
                        </tr>
                        <tr height="60">
                            <td colspan="2" align="center">
                                <button onClick="bb(DL)" style="width:200px; height:40px;" ><b>登录</b></button>
                            </td>
                        </tr>
                    </table>
                </div><!--登录窗口结束-->
            </div><!--登录背景透明结束-->

zcdnz=document.getElementById("zcdnz");

//登录背景蒙层宽高
DLBJ=document.getElementById("DLBJ");
DLBJ.style.width=window.innerWidth+"px";
DLBJ.style.height=window.innerHeight+"px";
//注册背景蒙层宽高
ZCBJ=document.getElementById("ZCBJ");
ZCBJ.style.width=window.innerWidth+"px";
ZCBJ.style.height=window.innerHeight+"px";


//登录错误提示
DLCU=document.getElementById("DLCU");

DLinp=document.getElementsByClassName("DLinput");
DLspans=document.getElementsByClassName("DLspan");
//打开关闭登录、注册显示窗口
//x是打开（1）或关闭（2），y是登录(DL)或注册(ZC)
function XS(x,y)
{
	//登录界面
	if(y==DL)
	{
		if(x==1)
		{
			//背景
			DLBJ.style.display="block";
			//框
			DL.style.display="block";
			YZ();
		}
		else if(x==2)
		{
			DLBJ.style.display="none";
			DL.style.display="none";
			//清空全部
			cc(1,this,DL);
		}
	}
	//注册界面
	if(y==ZC)
	{
		if(x==1)
		{
			//背景
			ZCBJ.style.display="block";//显示窗口
			//框
			ZC.style.display="block";
			
		}
		else if(x==2)
		{
			ZCBJ.style.display="none";//关闭窗口
			ZC.style.display="none";
			//清空全部
			cc(1,this,ZC);
		}
	}
}
function YZ()
{	
	YZM.innerHTML="";
	for(var i=0;i<4;i++)
	{
		YZM.innerHTML+=yznum[parseInt(Math.random()*1000)%(yznum.length-1)];
		//YZM.innerHTML=yznum[parseInt(Math.random()*yznum.length)];
		//alert(YZM.innerHTML);
	}
}

css

/*登录背景透明*/
#DLBJ
{
	background:rgba(0,0,0,0.8);
	position:absolute;
	display:none;
	left:0px;
	top:0px;
	z-index:20;
}

/*登录框浮动*/
#DL
{
	width:450px;
	height:350px;
	background:#999999;
	position:absolute;
	left:450px;
	top:85px;
	display:none;
	z-index:21;
}