返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
JavaScript教程当前位置:首页 > HTML教程 > JavaScript教程 > 正文

Javascript实例教程(1)创建弹出式窗口和创建折叠式

发布时间:2013-10-11 10:10:00   来源:   点击:

    利用javascript创建弹出式窗口
   利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口。你可以设置这个浏览器窗口的一些属性,如高度、宽度以及是否让该窗口有一个状态条或者工具条。在下面的例子中,我将窗口设置为:350 x 400,即高度为350像素,宽度为400像素;其中也包括了另外的一些设置,如滚动条;而将其它的设置(如状态条、菜单条)都设置为没有(no)。


   下面是具体的代码,你可以将它放置到网页的前面:

  1. <SCRIPT LANGUAGE = "JavaScript"> 
  2. function CreateWindow() 
  3. msgWindow=window.open("pop_win.html","displayWindow", 
  4. "toolbar=no,width=350,height=400,directories=no
  5. status=no,scrollbars=yes,resize=no,menubar=no") 
  6. </SCRIPT> 

    仔细体会一下这段代码,其实就只用到一个window.open函数,是不是很简单呀!你也许会问:那怎么调用这段代码呢?其实你不用着急,下面马上会给出:
<FORM><INPUT TYPE = "button" VALUE = "创建窗口"
onClick = "CreateWindow()"></FORM>

创建折叠式导航菜单

为了创建折叠式的导航菜单,你可以在网页的最前面部分以下代码:

  1. <SCRipT LANGUAGE="javaScript"> 
  2. <!-- Begin 
  3. function formHandler() 
  4. var URL = document.form.site.options 
  5. [document.form.site.selectedIndex].value; 
  6. window.location.href = URL
  7. // End --> 
  8. </SCRIPT> 

   那在网页上如何调用呢?以下是具体代码:

  1. <CENTER> 
  2. <FORM name = "form"> 
  3. <SELECT NAME="site" SIZE=1 onChange ="formHandler()"> 
  4. <OPTION VALUE="">连接到…. 
  5. <OPTION VALUE="http://www.pconline.com.cn">太平洋电脑网 
  6. <OPTION VALUE="http://cn.yahoo.com">中文雅虎 
  7. <OPTION VALUE="http://www.263.net">263网站 
  8. <OPTION VALUE="http://www.usnews.com">美国在线 
  9. <OPTION VALUE="http://www.neworiental.org">北京新东方 
  10. </SELECT> 
  11. </FORM> 
  12. </CENTER> 

 下面是全部的代码:
<head>
<title>Untitled Document</title>

 

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

<SCRIPT LANGUAGE="Javascript">
<!-- Begin
function formHandler()
{
var URL = document.form.site.options
[document.form.site.selectedIndex].value;
window.location.href = URL;
// End -->

}
</SCRIPT>
</head>
<FORM name = "form">
<SELECT NAME="site" SIZE=1 onChange ="formHandler()">
<option value="">连接到…. </option>
<option value="http://www.pcedu.com.cn">太平洋网络学院</option>
<option value="http://cn.yahoo.com">中文雅虎 </option>
<option value="http://www.263.net">263网站 </option>
<option value="http://www.usnews.com">美国在线 </option>
<option value="http://www.neworiental.org">北京新东方 </option>
</SELECT>
</FORM>

效果实现:

 

 

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814