现在的位置: 首页 > 综合 > 正文

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

2013年08月22日 ⁄ 综合 ⁄ 共 4347字 ⁄ 字号 小 中 大 ⁄ 评论关闭

1．在打开网页后弹出一个宽200,高300 的窗口,且在该网页关闭后，弹出的窗口也关闭；
2．设计弹出式菜单；
3．在状态栏上显示当前时间；
4．在一个窗口中输入内容，显示在另一个窗口中。

最终实现效果                                            

文件index.html的内容

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>文档对象模型实验</title>  
  6. <script type="text/javascript" language="javascript">  
  7.     var win;   
  8.     function openWIN() {   
  9.         window.open("main.html", "这是一个弹出窗口", "width=200px,height=300px");   
  10.     }   
  11.     function closeWIN() {   
  12.         win.close();   
  13.     }   
  14. </script>  
  15. </head>  
  16. <body onLoad="openWIN(); this.opener='null'; this.close();">  
  17. </body>  
  18. </html>  

文件main.html的内容

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>文档对象模型</title>  
  6. <script language="javascript" type="text/javascript">  
  7. function funShowTime() {   
  8. var dtTime=new Date();   
  9. window.status=dtTime;   
  10. }   
  11. var idClock=setInterval("funShowTime()",1000);   
  12. </script>  
  13. </head>  
  14. <frameset rows="82%,18%" border="0px">  
  15. <frame name="disp" src="top.html">  
  16. <frame name="inp" src="bottom.html">  
  17. </frameset>  
  18. </html>  

文件top.html的内容

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. <title>DOM实验</title>  
  6. <style>  
  7. * {   
  8.     margin: 0px;   
  9.     padding: 0px;   
  10. }   
  11. body {   
  12.     font-size: 14px;   
  13. }   
  14. #menu {   
  15.     background-color: yellow;   
  16. }   
  17. .menu {   
  18.     cursor: pointer;   
  19.     display: inline;   
  20. }   
  21. .item {   
  22.     position:absolute;   
  23.     background-color:#66FFFF;   
  24.     width:32px;   
  25.     display:none;   
  26.     cursor:pointer;   
  27. }   
  28. </style>  
  29. <script type="text/javascript" language="javascript">  
  30. function show(id){   
  31.     var file=document.getElementById('itemFile');   
  32.     var edit=document.getElementById('itemEdit');   
  33.     var help=document.getElementById('itemHelp');   
  34.     var objWhich=document.getElementById(id);   
  35.     var menu=new Array();   
  36.     menu[0]=file;   
  37.     menu[1]=edit;   
  38.     menu[2]=help;   
  39.     for(var i=0; i<menu.length; i++) {   
  40.         if(objWhich==menu[i]) {   
  41.             if(objWhich.style.display=="none"){   
  42.                 objWhich.style.display="block";   
  43.                 objWhich.style.left=i*32+"px";   
  44.             }else{   
  45.                 objWhich.style.display="none";   
  46.             }   
  47.         } else {   
  48.             menu[i].style.display="none";   
  49.         }   
  50.     }   
  51. }   
  52. </script>  
  53. </head>  
  54. <body style="background:url(bg.png)">  
  55.     <div id="menu">  
  56.         <div id="menuFile" class="menu" onMouseOver="show('itemFile')" onMouseOut="show('itemFile')"> 文件 </div>  
  57.         <div id="menuEdit" class="menu" onMouseOver="show('itemEdit')" onMouseOut="show('itemEdit')"> 编辑 </div>  
  58.         <div id="menuHelp" class="menu" onMouseOver="show('itemHelp')" onMouseOut="show('itemHelp')"> 帮助 </div>  
  59.     </div>  
  60.        
  61.     <div class="item" id="itemFile">  
  62.         新建<br>  
  63.         打开<br>  
  64.         保存<br>  
  65.         关闭<br>  
  66.     </div>  
  67.     <div class="item" id="itemEdit">  
  68.         复制<br>  
  69.         剪切<br>  
  70.         粘贴<br>  
  71.         删除<br>  
  72.     </div>  
  73.     <div class="item" id="itemHelp">  
  74.         欢迎<br>  
  75.         关于<br>  
  76.     </div>  
  77.     <div id=divDisp style="color:white">  
  78.     </div>  
  79. </body>  
  80. </html>  

文件bottom.html的内容

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>输入内容</title>  
  6. <script>  
  7. function funGo(){   
  8. parent.disp.document.all.divDisp.innerHTML=document.frmInput.txtInput.value+   
  9. "<br>"+parent.disp.document.all.divDisp.innerHTML   
  10. document.frmInput.txtInput.value=""  
  11. }   
  12. </script>  
  13. </head>  
  14.   
  15. <body style="background:url(bg.png); font-size:14px;">  
  16. <form name=frmInput onSubmit="funGo();return false;" style="border-top: dotted red 3px;padding-top: 7px; color:yellow; font-weight:600; text-align:center">  
  17. Say: <input type=text name=txtInput size=14> <input type=button  
  18. onClick="funGo()" value=OK>  
  19. </form>  
  20. </body>  
  21. </html>  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞