javascipt之动态网页编程三

最新推荐文章于 2024-04-25 14:03:33 发布

车晋强

最新推荐文章于 2024-04-25 14:03:33 发布

阅读量602

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chejinqiang/article/details/44117489

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

18.1 复选框
复选框是一个带有标识的小方格，当用户单击时，在其中会显示一个选择标志。或者已经有的选择标志消失。本节向用户显示多个复选框。

<html>
<head></head>
<body>
<form name="myform">
<center>
<h1>请选择一个复选框</h1>
<table border="1" bgcolor="cyan" width="200">
<tr><td><input type="checkbox" name="check1" οnclick="check1Click()" id="check1">check1</td></tr>
<tr><td><input type="checkbox" name="check2" οnclick="check2Click()" id="check2">check2</td></tr>
<tr><td><input type="checkbox" name="check3" id="check3" οnclick="check3Click()">check3</td></tr>

</table>
<br><br>
<input type="text" name="textBox" id="textBox" size="25">
</center>
</form>
<script language="javascript">
function check1Click(){
document.myform.textBox.value="1 is clicked";
}
function check2Click(){
document.myform.textBox.value="2 is clicked";
}
function check3Click(){
document.myform.textBox.value="3 is clicked";
}
</script>
</body>
</html>
18.2 单选按钮
单选按钮与复选框非常相似，只是在一组单选按钮中，每次只能有一个被选中，对比如下。
本节将创建一个有关单选按钮的例子，当用户单击某个单选按钮时，将在文本框中表明是哪一个单选按钮被单击。
通过给每一个单选按钮起相同的名字，可以将它些按钮组合在一起。与复选框例子相同，帮不再例出。
18.3 复选框与单选按钮的组合使用
将复选框与单选按钮组合起来使用很常用。
18.4 使用elements[]数组
这样做可以更加的简单。Web控件是elements[]数组的一部分。
18.5选择控件
选择控件是一个可下拉的列表，当用户选择控件中的一项进行选择时，其 onchange事件处理器被调用。
单项选择控件，本节介绍选择控件的使用，并创建一个例子，向用户显示文本框和一个选择控伯。当用户单击选择控件右边的向下时，。
如下代码：

<html>
<head></head>
<body>
<form name="myform">
<center>
<h1>选择控件示例</h1>
点选下拉列表中的一项
<br><br>
<input type="text" name="textBox" id="textBox" size="30">
<br><br>
<select name="select1" οnchange="selectionMade();">
<option>selection1</option>
<option>selection2</option>
<option>selection3</option>
<option>selection4</option>
</select>
</center>
</form>
<script language="javascript">
function selectionMade(){
document.myform.textBox.value="你选择了选项"+(document.myform.select1.selectedIndex+1);
}
</script>
</body>
</html>
18.5.2 多项选择控件
如果在<select>中加入multiple属性。选择控件就可以支持多项选择。本节将创建这样一个程序，显示一个可供多选的选择控件和一个文本区。使用鼠标，用户可以选择多项，并将用户作出的选择全部显示在文本区中，与单选控件不同，多选控件不是下拉列表。而是一个可以滚动的列表。

<html>
<head></head>
<body>
<form name="myform">
<center>
<h1>选择控件示例</h1>
点选下拉列表中的一项
<br><br>
<textarea name="textArea" cols="20" rows="10"></textarea>
<br><br>
<select name="select1" οnchange="selectionMade();" multiple>
<option>selection1</option>
<option>selection2</option>
<option>selection3</option>
<option>selection4</option>
</select>
</center>
</form>
<script language="javascript">
function selectionMade(){
with(document.myform.select1){
for(var loop_index=0;loop_index<length;loop_index++)
if(options[loop_index].selected)
document.myform.textArea.value+=options[loop_index].text+"\n\r";
}
}
</script>
</body>
</html>
18.5.3 级联选择控件
在网络中还经常看到这样一种选择，多个选择控件相互关联，选择第一个后，也就限定了第二个的可选内容。例如，当用户选择了省份后，第二个地设市就跟着自动变为选择的省份的城市。

<html>
<head></head>
<body>
<h1>级联样式样</h1>
<h2>请选择：</h2>
<form name="testform" id="testform" action="#" method="get">
国家:
<select name="country" id="country" οnchange="addOptions(cities[this.options[this.selectedIndex].text],document.testform.city);">
<option selected="selected">Australia</option>
<option>France</option>
<option>Japan</option>
<option>New Zealand</option>
</select>
<br>
城市：
<select name="city" id="city">
<option>sydney</option>
<option>nelbourne</option>
<option>Melbourne</option>
<option>brisbane</option>
</select>
</form>
<script language="javascript">
var cities=new Array(4);
cities["Australia"]=["sydney","melbourne","canberra","perth","brisbane"];
cities["France"]=["paris","lyons","nice","dijon"];
cities["Japan"]=["tokyo","kyoto","oska","nara"];
cities["New Zealand"]=["auckland","wellington","christchurch","dunedin","queenstown"];
function removeOptions(optionmenu){
for(var i=0;i<optionmenu.options.length;i++)
optionmenu.options[i]=null;
}
function addOptions(optionlist,optionmenu){
removeOptions(optionmenu);
for(var i=0;i<optionlist.length;i++)
optionmenu[i]=new Option(optionlist[i],optionlist[i]);
}
</script>
</body>

</html>

第19章设置菜单
菜单设计是网页设计中必不可少的内容，而下拉菜单又是其中最常见，使用最广泛的一种，本节就介绍几种常见的下拉菜单。、
最简单的菜单是使用<select>建立了一个下拉表，然后将<select>的onchange事件绑定在一个函数上，通过函数响应用户选择。

<html>
<head></head>
<body>
<center>
<h1>基本的下拉菜单</h1>
友情链接：
<br><br>
<form name="myform" id="myform" method="post" action="redirector.cgi">
<select name="sites" id="sites" οnchange="redirect(this);">
<option value="" selected="selected">选择要访问的站点</option>
<option value="http://news.google.com">goole新闻</option>
<option value="http://news.yahoo.com">yahoo新闻</option>
<option value="http://club.163.com">网易社区</option>
<option value="http://www.netxeyes.com">小榕论坛</option>
</select>
</form>
</center>
<script language="javascript">
function redirect(menu){
var choice=menu.selectedIndex;
if(choice!=0)
window.location=menu.options[choice].value;
}
</script>
</body>
</html>
19.1.2改进
本节将给出一个例子，当用户选择后，还需要进一步确认才可以访问到相应的站点。需要在页面中添加一个确认按钮。通过其点击来完成相应的页面的载入。

<html>
<head>
<style type="text/css">
.nochoice{color:black;}
.choice{color:blue;}
</style>
</head>
<body>
<center>
<h1>改进的下拉菜单</h1>
<h3>友情链接：</h3>
<form name="myform" id="myform" action="redirector.cgi" method="post">
<select name="menu" id="menu" οnchange="resetIfBlank(this);">
<option value="" class="nochoice" selected="selected">选择站点</opiton>
<option value="" class="nochoice" ></option>
<option value="" class="nochoice">搜索引警</option>
<option value="" class="nochoice">--------------------------------</option>
<option value="http://www.google.com" class="choice">google</option>
<option value="http://yahoo.com" class="choice">yahoo</option>
<option value="http://www.baidu.com" class="choice">百度</option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">电子商务</option>
<option value="" class="nochoice">--------------------------------</option>
<option value="http://www.amazon.com" class="choice">Amazon</option>
<option value="http://www.buy.com" class="choice">buy.com</option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">Demos</option>
<option value="" class="nochoice">-------------------------------</option>

</select>
<input type="submit" value="Go" οnclick="redirect(document.myform.menu);return false;">
</form>
</center>
<script language="javascript">
document.myform.menu.selectedIndex=0;
function redirect(menu){
var newLocation=menu[menu.selectedIndex].value;
if(newLocation!="")
self.location=newLocation;

}
function resetIfBlack(menu){
if(menu[menu.selectedIndex].value=="")
menu.selectedIndex=0;
}

</script>
</body>
</html>
由于代码中采用了一种对站点分类的效果，因此上述代码不仅可以用于友情链接，还可以用于站点推荐，产品分类等栏目的导航。
19.1.3 渐显效果
19.2DHTML菜单
19.2.1 模拟系统菜单
一个基于JavaScrpt的菜单系统一般会使用CSS的适当样式来实现。倒如要创建一个分类菜单，通常会采用<div>标签来支持不同的选择。

<html>
<head>
<style type="text/css">
.menuHead{font-weight:bold;
font-size:larger;
background-color:#9999FF;
}
.menuchoices{
background-color:#cc99ff;
width:180px;
}
.menu a{
color:#000000;
text-decoration:none;
}
.menu a:hover{
text-decoration:underline;
}
#menu1{
position:absolute;
top:80px;left:10px;width:180px;}
#menu2{
position:absolute;top:80px;left:190px;width:180px;}
}
#menu3{
position:absolute;top:80px;left:370px;width:180px;}
</style>
<script language="javascript">
(document.getElementById?DOMCapable=true:DOMCapable=false);
function hide(menuName){
if(DOMCapable){
var theMenu=document.getElementById(menuName+"choices");
theMenu.style.visibility="hidden";
}
}
function show(menuName){
if(DOMCapable){
var theMenu=document.getElementById(menuName+"choices");
theMenu.style.visibility="visible";
}
}
</script>
</head>
<body>
<center><h1>折叠式下拉菜单</h1></center>
<div id="menu1" class="menu" οnmοuseοver="show('menu1');" οnmοuseοut="hide('menu1');">
<div class="menuHead">搜索引擎站点</div>
<div id="menu1choices" class="menuchoices">
<a href="http://www.google.com">google</a><br>
<a href="http://www.yahoo.com.cn">雅虎</a><br>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.msn.com">MSN</a><br>
<a href="http://www.dmoz.org">DMOZ</a><br>
</div>
</div>
<div id="menu2" class="menu" οnmοuseοver="show('menu2');" οnmοuseοut="hide('menu2');">
<div class="menuHead">电子商务站点</div>
<div id="menu2choices" class="menuchoices">
<a href="http://www.google.com">Amazon</a><br>
<a href="http://www.ebay.com"></a><br>
<a href="http://www.buy.com">buy.com</a><br>
</div>
</div>
<div id="menu3" class="menu" οnmοuseοver="show('menu3');" οnmοuseοut="hide('menu3');">
<div class="menuHead">教程类网站</div>
<div id="menu3choices" class="menuchoices">
<a href="http://www.javascript.com">javascriptref</a><br>
<a href="http://www.w3c.org">W3C</a><br>
<a href="http://www.prit.com">pint</a><br>
</div>
</div>
<script language="javascript">
if(DOMCapable){
hide("menu1");
hide("menu2");
hide("menu3");
}
</script>
</body>
</html>
19.2 远程控制菜单
远程菜单是一个弹出窗口，可以对主浏览窗口进行控制，假设有多幅图片要显示，但希望由用户来选择具体显示哪一幅。
<html>
<head></head>
<body>
<img name="displayedImage" id="displayedImage" alt="" src="image1.gif">
<script language="javascript">
var remoteControlURL="19.6.html";
var remoteFeatures="height=150,width=400,location=no,";
remoteFeatures+="menubar=no,scrollbars=no,status=no,toolbar=no";
var remoteControl=window.open(remoteControlURL,"controlwindow",remoteFeatures);

</script>
</body>
</html>

<html>
<head></head>
<body>
<h3>选择要显示的图片</h3>
<form action="#" οnsubmit="return false;" method="get">
<input type="button" value="image1" οnclick="loadImage('image1.gif');">
<input type="button" value="image2" οnclick="loadImage('image2.gif');">
<input type="button" value="image3" οnclick="loadImage('image3.gif');">
<input type="button" value="image4" οnclick="loadImage('image4.gif');">
</form>
<script language="javascript">
function loadImage(which){
var contentWindowURL="19.5.html";
if(!window.opener||window.opener.closed){
alert("Main window went away,will respawn it.");
window.open(contentWindowURL,"_blank");
window.close();
return;
}
window.opener.document.images["displayedImage"].src=which;
window.opener.focus();
}
</script>
</body>
</html>
19.2.3 滑动菜单
滑动菜单也是一种常见的菜单效果，在页面打开时，滑动菜单是隐藏的。当鼠标移动到菜单位置时，菜单才会显示。

<html>
<head>
<style type="text/css">
.menu{
background:blue;
padding:0px;
margin:0px;
border-style:solid;
border-width:2px;
border-color:lightblue;
position:absolute;
text-align:left;
width:150px;
top:80px;
z-index:100;
}
.menuitem{
color:white;
position:relative;
display:block;
font-style:normal;
margin:0px;
padding:2px 15px 2px 10px;
font-size:smaller;
font-family:sans-serif;
font-weight:bold;
text-decoration:none;
}
a.menuitem:hover{
background-color:darkblue;
}

</style>
</head>
<body οnlοad="document.getElementById('slider').style.left=leftmost+'px';">
<div class="menu" id="slider" οnmοuseοver="startRightScroll('slider');" οnmοuseοut="startLeftScroll('slider');">>
<h3 class="menuitem">图书列表</h3>
<a class="menuitem" href="01.html">精美散文 </a>
<a class="menuitem" href="02.html">古典文学</a>
<a class="menuitem" href="03.html">国外名著</a>
<a class="menuitem" href="04.html">名家合集</a>
</div>
<center><h1>欢迎光临我的小站</h1></center>
<script language="javascript">
var leftmost=-120;
var rightmost=5;
var interval=null;
var DOMCapable;
document.getElementById?DOMCapable=true:DOMCapable=false;
function scrollRight(menuName){
var leftPosition;
if(DOMCapable){
leftPosition=parseInt(document.getElementById(menuName).style.left);
if(leftPosition>=rightmost){clearInterval(interval);return;}
else{
leftPosition+=5;
document.getElementById(menuName).style.left=leftPosition+"px";
}
}
}
function scrollLeft(menuName){
var rightPosition;
if(DOMCapable){
rightPosition=parseInt(document.getElementById(menuName).style.left);
if(rightPosition<=leftmost){clearInterval(interval);return;}
else{
rightPosition-=5;
document.getElementById(menuName).style.left=rightPosition+"px";
}
}
}
function startRightScroll(menuName){
clearInterval(interval);
interval=setInterval('scrollRight("'+menuName+'")',30);
}
function startLeftScroll(menuName){
clearInterval(interval);
interval=setInterval('scrollLeft("'+menuName+'")',30);
}
</script>
</body>
</html>
19.3 常见菜单样式举例
弹出式菜单，本节介绍一种左键弹出菜单的方法

<html>
<head>
<style type="text/css">
body{
font:9pt "宋体";
margin-top:0px;
color:#ffffff;
background:#000000;}
a.{
font:9pt "宋体";
cursor:hand;
color:#ffffff;
font-size:9pt;
text-decoration:none;
}
a:active{
font:9pt "宋体";
cursor:hand;
color:#FF0033;
}
a.cc:hover{
font:9pt "宋体";
cursor:hand;
color:#FF0033;
}
.box{
font:9pt "宋体";
position:absolute;
background:#000000;
}

</style>
</head>
<body>
<center><h1>弹出式菜单</h1></center>
在窗口中任意位置单击鼠标左键，可以唤出菜单。
<table id="itemopen" name="itemopen" class="box" style="display:none">
<tr><td>弹出菜单</td></tr>
<tr><td><a href="index.html" class="cc">本站首页</a></td></tr>
<tr><td><a href="index.html" class="cc">最新更新</a></td></tr>
<tr><td><a href="index.html" class="cc">构想软件</a></td></tr>
<tr><td><a href="index.html" class="cc">桌面壁纸</a></td></tr>
</table>
<script language="javascript">
document.οnclick=popUp;
function popUp(){
newx=window.event.x;
newy=window.event.y;
menu=document.all.itemopen;
if(menu.style.display=="")
menu.style.display="none";
else
menu.style.display="";
menu.style.pixelLeft=newx-50;
menu.style.pixelTop=newy-50;
}

</script>
</body>
</html>
浮动菜单
在有的站点中，无论怎么样调整浏览器，菜单始终随着窗口的调整来变化。总是固定显示在页面的同一位置。
树形导航菜单

第二十章浏览器与性能检测
浏览器检测对于编写适用于多种浏览器的代码是非常有用的。而性能检测主要是对客户端浏览器，显示器等性能的检测。这些检测可以确定客户端面插件，语言等信息。对于编写针对不同用户的代码也是非常有用的。
20.1 浏览器检测
进行浏览器检测主要是使用Navigator对象，其属性经常用于浏览器版本的检测。属性如下：
appCodeName 包含用户浏览器的名称
appMinorVersion 浏览器的子版本号
appName 浏览器的官方名称
appVersion 包含浏览器的版本
userAgent 浏览器传送到服务器完整的用户代理值
vendor 指明浏览器厂商
VendorSub 指明浏览器的版本数
<html>
<head></head>
<body>
<script language="javascript">
var browserName=navigator.appName;
var browserVersion=parseFloat(navigator.appVersion);
var userAgent=navigator.userAgent;
document.write("your browser's user-agent string="+userAgent+"<br>");
document.write(browserName+"<br>");
document.write(browserVersion+"<br>");
</script>
</body>
</html>
20.2 检测内容
本节介绍检测性能可以应运到的领域。
JavaScript检测：
JavaScript支持检测被看作是最容易的检测技术。如果一段脚本不有运行，就会认为浏览器不支持JavaScrpt，
JavaScript版本检测
使用JavaScript的非标准属性language。本书的很多示例中使用了标准的type.使用language属性时，浏览器会绕过不支持的<script>标签内容。
JavaScript对象检测
很多时候，用户并不关心使用的是哪一个版本。而更关心哪些对象和方法是可用的。
可以使用下列来检测是不是使用了IE浏览器
var id=document.all?true:false;
var getbyId=document.getElementById?true:false;
java检测
可以使用Navigator的javaEnabled()来检测浏览器是不是支持Java.如果支持，返回true,如果不支持。返回false.
插件检测
浏览器中安装的每一个插件都会有一个入口程序，用来接入plugins[]数组。
if(navigator.plugins["Shockwave Flash"])
alert(you hava flash);
else
alert("undetectable:rely on tag");
20.2.6 语言检测
在Netscape和Opera浏览器中，使用window.navigator.language.
在IE中，使用window.navigator.userLanguage,window.navigator.systemLanguage;前者指浏览器的语言，后者指操作系统的语言。
20.3 用于可视化检测的Screen对象
用来指示浏览器的基本屏幕特性。
下面的代码说明Screen对象的基本用法：

<html>
<head></head>
<body>
<h2>current screen properties</h2>
<script type="text/javascript">
if(window.screen){
document.write("height:"+screen.height+"<br>");
document.write("width:"+screen.width+"<br>");
document.write("available height:"+screen.availHeight+"<br>");
document.write("available width:"+screen.availWidth+"<br>");
document.write("color depth:"+screen.colorDepth+"bit<br?");
}
</script>
</body>
</html>
获取浏览器窗口的实际大小，
对于同样的功能，可能需要不同的方法来实现，对于要得到窗口的尺寸，对于不同的浏览器来说，需要使用不同的属性和方法。
若想要检测窗口的真实尺寸，在‘Netscape中需要使用Window对象
在IE需要深入到Document中对body进行检测。
在DOM中，需要注意根元素<html>的尺寸。如下代码：

<html>
<head></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2>
<hr>
<form name="myform" id="myform" action="#" method="get">
浏览器窗口的实际高度：<input type="text" name="availHeight" id="availHeight" size="4"><br>
浏览器窗口的实际宽度：<input type="text" name="availWidth" id="availWidth" size="4"><br>
</form>
<script language="javascript">
var winWidth=0;
var winHeight=0;
function findDimensions(){
if(window.innerWidth)
winWidth=window.innerWidth;
else if(document.body&&document.body.clientWidth)
winWidth=document.body.clientWidth;
if(window.innerHeight)
winHeight=window.innerHeight;
else if(document.body&&document.body.clientHeight)
winHeight=document.body.clientHeight;
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth){
winWidth=document.documentElement.clientWidth;
winHeight=document.documentElement.clientHeight;
}
document.myform.availHeight.value=winHeight;
document.myform.availWidth.value=winWidth;

}
window.οnresize=findDimensions;
</script>
</body>
</html>
20.3.2 设置屏幕对象的尺寸
该实例允许在运行时改变内容和样式风格的浏览器中，还可以设置屏幕对象的尺寸，例如可以设置文字大小随窗口大小而改变。
如下代码所示：

<html>
<head>
<style type="text/css">

</style>
<link type="text/css" rel="stylesheet" href="20.8.css">
<script src="20.8.css" language="javascript"></script>
</head>
<body>
<h1 id="test" style="font-family:verdana;text-align:center;">请改变大小，注意字号的变化</h1>
<script language="javascript">

</script>
</body>
</html>
高级检测技术
关于浏览器检测技术还有很多技巧，例如可以通过传递给用户一组数据来确定下载速度。也可以在Navigator对象中增加自己的属性。
如下代码：
出点问题。帮进行下一项
个性设置，指定主页

<html>
<head>
</head>
<body>
<a href="#" οnclick="HomePage='http://www.baidu.com';this.style.behavior='url(#default#homepage)';this.setHomePage(HomePage);return false">设置百度首页</a>
<a href="#" οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com');return false">设置百度为首页</a>
</body>
</html>