您的位置：首页 > Web前端 > JavaScript

Javascript实现弹出菜单，弹出窗口

2010-12-13 20:50 423 查看

1．在打开网页后弹出一个宽200,高300 的窗口,且在该网页关闭后，弹出的窗口也关闭；

2．设计弹出式菜单；

3．在状态栏上显示当前时间；

4．在一个窗口中输入内容，显示在另一个窗口中。

最终实现效果

文件index.html的内容

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>文档对象模型实验</title>

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

var win;

function openWIN() {

window.open("main.html", "这是一个弹出窗口", "width=200px,height=300px");

}

function closeWIN() {

win.close();

}

</script>

</head>

<body onLoad="openWIN(); this.opener='null'; this.close();">

</body>

</html>

文件main.html的内容

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>文档对象模型</title>

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

function funShowTime() {

var dtTime=new Date();

window.status=dtTime;

}

var idClock=setInterval("funShowTime()",1000);

</script>

</head>

<frameset rows="82%,18%" border="0px">

<frame name="disp" src="top.html">

<frame name="inp" src="bottom.html">

</frameset>

</html>

文件top.html的内容

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>DOM实验</title>

<style>

* {

margin: 0px;

padding: 0px;

}

body {

font-size: 14px;

}

#menu {

background-color: yellow;

}

.menu {

cursor: pointer;

display: inline;

}

.item {

position:absolute;

background-color:#66FFFF;

width:32px;

display:none;

cursor:pointer;

}

</style>

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

function show(id){

var file=document.getElementById('itemFile');

var edit=document.getElementById('itemEdit');

var help=document.getElementById('itemHelp');

var objWhich=document.getElementById(id);

var menu=new Array();

menu[0]=file;

menu[1]=edit;

menu[2]=help;

for(var i=0; i<menu.length; i++) {

if(objWhich==menu[i]) {

if(objWhich.style.display=="none"){

objWhich.style.display="block";

objWhich.style.left=i*32+"px";

}else{

objWhich.style.display="none";

}

} else {

menu[i].style.display="none";

}

}

}

</script>

</head>

<body style="background:url(bg.png)">

<div id="menu">

<div id="menuFile" class="menu" onMouseOver="show('itemFile')" onMouseOut="show('itemFile')"> 文件 </div>

<div id="menuEdit" class="menu" onMouseOver="show('itemEdit')" onMouseOut="show('itemEdit')"> 编辑 </div>

<div id="menuHelp" class="menu" onMouseOver="show('itemHelp')" onMouseOut="show('itemHelp')"> 帮助 </div>

</div>

<div class="item" id="itemFile">

新建<br>

打开<br>

保存<br>

关闭<br>

</div>

<div class="item" id="itemEdit">

复制<br>

剪切<br>

粘贴<br>

删除<br>

</div>

<div class="item" id="itemHelp">

欢迎<br>

关于<br>

</div>

<div id=divDisp style="color:white">

</div>

</body>

</html>

文件bottom.html的内容

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>输入内容</title>

<script>

function funGo(){

parent.disp.document.all.divDisp.innerHTML=document.frmInput.txtInput.value+

"<br>"+parent.disp.document.all.divDisp.innerHTML

document.frmInput.txtInput.value=""

}

</script>

</head>

<body style="background:url(bg.png); font-size:14px;">

<form name=frmInput onSubmit="funGo();return false;" style="border-top: dotted red 3px;padding-top: 7px; color:yellow; font-weight:600; text-align:center">

Say: <input type=text name=txtInput size=14> <input type=button

onClick="funGo()" value=OK>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航