Javascript2
Form表单对象：
表单对象数组，属性，方法，事件：……。
表单对象的应用：
表单验证
<html> <head> <title>表单验证</title> <script language="javascript" type="text/javascript"> <!-- function checkForm() { if (document.myForm.myName.value.length==0) { alert("请输入您的姓名"); return false; } if (document.myForm.mySex.value.length==0) { alert("请输入您的性别"); return false; } if (document.myForm.myYear.value.length==0 || document.myForm.myMonth.value.length==0 || document.myForm.myDay.value.length==0) { alert("您的出生年月日填写不完整"); return false; } if (document.myForm.myNational.value.length==0) { alert("请输入您的民族"); return false; } if (document.myForm.myBirthplace.value.length==0) { alert("请输入您的籍贯"); return false; } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkForm()" action="submit.htm"> 姓名：<input type="text" name="myName"><br> 性别：<input type="text" name="mySex"><br> 出生年月日：<input type="text" name="myYear" size="4">-<input type="text" name="myMonth" size="2">-<input type="text" name="myDay" size="2"><br> 民族：<input type="text" name="myNational"><br> 籍贯：<input type="text" name="myBirthplace"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
elements循环验证表单
<html> <head> <title>表单验证</title> <script language="javascript" type="text/javascript"> <!-- function checkForm() { for (i=0;i<document.myForm.elements.length;i++) { if (document.myForm.elements[i].value.length==0) { alert("您的表单没有填写完整"); return false; } } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkForm()" action="submit.htm"> 姓名：<input type="text" name="myName"><br> 性别：<input type="text" name="mySex"><br> 出生年月日：<input type="text" name="myYear" size="4">-<input type="text" name="myMonth" size="2">-<input type="text" name="myDay" size="2"><br> 民族：<input type="text" name="myNational"><br> 籍贯：<input type="text" name="myBirthplace"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
表单提交
<html> <head> <title>设置表单的提交方式</title> <script language="javascript" type="text/javascript"> <!-- function checkForm() { //判断表单是否填写完整 for (i=0;i<2;i++) { if (document.myForm.elements[i].value.length==0) { alert("您的表单没有填写完整"); return false; } } //判断下拉列表框的值 if (document.myForm.submitType.value=="Server") { //如果下拉列表框的值为Server，则将表单提交到网页上 document.myForm.action = "submit.htm"; } else { //如果下拉列表框的值为Email，则将表单使用Email方式提交 //设置提交表单的编码方法 document.encoding = "text/plain"; document.myForm.action = "mailto:admin@aspxfans.com"; } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkForm()"> 姓名：<input type="text" name="myName"><br> 性别：<input type="text" name="mySex"><br> 表单提交方式： <select name="submitType"> <option value="Server">服务器方式</option> <option value="Email">EMAIL方式</option> </select> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
重置表单提示
<html> <head> <title>重置表单的提示</title> <script language="javascript" type="text/javascript"> <!-- function ifReset() { if (window.confirm("真的要重置表单吗？")) { return true; } else { return false; } } --> </script> </head> <body> <form name="myForm" onReset="return ifReset()"> 姓名：<input type="text" name="myName"><br> 性别：<input type="text" name="mySex"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
自动提交
<html> <head> <title>不使用提交按钮提交表单</title> <script language="javascript" type="text/javascript"> <!-- function submitForm() { //判断表单是否填写完整 for (i=0;i<2;i++) { if (document.myForm.elements[i].value.length==0) { alert("您的表单没有填写完整"); //将下拉列表框的默认选项设为第1项（即放在“请选择”选项上） document.myForm.submitType.options[0].selected = true; //使用return可以从函数中返回，即跳出该函数 return; } } //判断下拉列表框的值 if (document.myForm.submitType.value=="selectType") { alert("请选择表单的提交方式"); } else if (document.myForm.submitType.value=="Server") { //如果下拉列表框的值为Server，则将表单提交到网页上 document.myForm.action = "submit.htm"; } else if (document.myForm.submitType.value=="Email") { //如果下拉列表框的值为Email，则将表单使用Email方式提交 document.encoding = "text/plain"; document.myForm.action = "mailto:admin@aspxfans.com"; } //提交表单 document.myForm.submit(); } --> </script> </head> <body> <form name="myForm"> 姓名：<input type="text" name="myName"><br> 性别：<input type="text" name="mySex"><br> 表单提交方式： <select name="submitType" onChange="submitForm()"> <option value="selectType">请选择</option> <option value="Server">服务器方式</option> <option value="Email">EMAIL方式</option> </select> </form> </body> </html>
表单元素：
单行文本框，多行文本框，密码框，单选按钮，多选按钮，下拉列表框，文件选择框，普通按钮，提交按钮，重置按钮，隐藏框，分组元素。
document.forms[0].elements[0]。
文本框：
文本框的创建，属性，方法，事件：……。
文本框
<html> <head> <title>文本框的创建方式</title> </head> <body> <form name="myForm"> 单行文本框：<input type="text" name="myName" size="20" value="这是单行文本框"><br> 密码框：<input type="password" name="myPassword" size="20" value="password"><br> 多行文本框：<textarea rows="10" cols="30">这是多行文本框</textarea> </form> </body> </html>
submit.htm
<html> <head> <title>提交表单</title> </head> <body> 表单提交完毕。 </body> </html>
提交时检查输入字数
<html> <head> <title>限制文本框中输入的字数</title> <script language="javascript" type="text/javascript"> <!-- function checkText() { if (document.myForm.textTitle.value.length>15) { alert("标题文字内容不能超过15个字"); return false; } if (document.myForm.Context.value.length>100) { alert("内容框中的文字不能超过100个字"); return false; } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkText()" action="submit.htm"> 标题：<input type="text" name="textTitle" size="30">（限输入15个文字）<br> 内容：<textarea rows="10" cols="30" name="Context"></textarea><br> （限输入100个文字）<br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
输入时检查字数
<html> <head> <title>限制文本框中输入的字数</title> <script language="javascript" type="text/javascript"> <!-- //校验标题文字个数是否超过限制 function titleLimit() { if (document.myForm.textTitle.value.length>15) { alert("标题文字内容不能超过15个字"); return false; } } //校验内容文字个数是否超过限制 function textLimit() { var titleCount = document.myForm.Context.value.length; if (titleCount>100) { alert("内容框中的文字不能超过100个字"); return false; } } //在提交时校验文字是否超过限制 function checkText() { //如果从titleLimit()函数返回false，则返回false if (titleLimit()==false) { return false; } //如果从textLimit()函数返回false，则返回false if (textLimit()==false) { return false; } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkText()" action="submit.htm"> 标题：<input type="text" name="textTitle" size="30" onKeyPress="return titleLimit()">（限输入15个文字）<br> 内容：<textarea rows="10" cols="30" name="Context" onKeyPress="return textLimit()"></textarea><br> （限输入100个文字）<br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
失去焦点时检查字数
<html> <head> <title>限制文本框中输入的字数</title> <script language="javascript" type="text/javascript"> <!-- //校验标题文字个数是否超过限制 function titleLimit() { if (document.myForm.textTitle.value.length>15) { alert("标题文字内容不能超过15个字"); return false; } } //校验内容文字个数是否超过限制 function textLimit() { var titleCount = document.myForm.Context.value.length; if (titleCount>100) { alert("内容框中的文字不能超过100个字"); return false; } } //在失去焦点时校验标题文字个数是否超过限制 function blurCheckTitle() { if (titleLimit()==false) { if (window.confirm("是否截断文字？")) { context = document.myForm.textTitle; context.value = context.value.substring(0,15); } } } //在失去焦点时校验内容文字个数是否超过限制 function blurCheckText() { if (textLimit()==false) { if (window.confirm("是否截断文字？")) { context = document.myForm.Context; context.value = context.value.substring(0,100); } } } //在提交时校验文字是否超过限制 function checkText() { //如果从titleLimit()函数返回false，则返回false if (titleLimit()==false) { return false; } //如果从textLimit()函数返回false，则返回false if (textLimit()==false) { return false; } } --> </script> </head> <body> <form name="myForm" onSubmit="return checkText()" action="submit.htm"> 标题：<input type="text" name="textTitle" size="30" onKeyPress="return titleLimit()" onBlur="blurCheckTitle()">（限输入15个文字）<br> 内容：<textarea rows="10" cols="30" name="Context" onKeyPress="return textLimit()" onBlur="blurCheckText()"></textarea><br> （限输入100个文字）<br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
鼠标经过时自动选择文本
<html> <head> <title>自动选择文本框中的文字</title> </head> <body> <form name="myForm" action="submit.htm"> 关键字：<input type="text" name="myText" size="30" onMouseOver="this.select()" value="请输入文字："> <input type="submit" value="提交"> </form> </body> </html>
鼠标经过时自动清除文本
<html> <head> <title>自动消除文本框中的文字</title> <script language="javascript" type="text/javascript"> <!-- function clearText() { myForm.myText1.value = ""; } --> </script> </head> <body> <form name="myForm" action="submit.htm"> 关键字：<input type="text" name="myText1" size="30" onMouseOver="this.select()" onFocus="clearText()" value="请输入文字："><br> <input type="submit" value="提交"> </form> </body> </html>
鼠标经过时至清楚初始文本
<html> <head> <title>自动消除文本框中的文字</title> <script language="javascript" type="text/javascript"> <!-- function clearText(textbox) { textbox.focus(); if (textbox.value == textbox.defaultValue) { textbox.value = ""; } } --> </script> </head> <body> <form name="myForm" action="submit.htm"> 关键字：<input type="text" name="myText1" size="30" onMouseOver="clearText(this)" value="请输入文字："><br> <input type="submit" value="提交"> </form> </body> </html>
按钮：
按钮属性，方法，事件：……。
button元素创建按钮
<html> <head> <title>使用button元素创建按钮</title> </head> <body> <form name="myForm" action="submit.htm"> 关键字：<input type="text" name="myText1"><br> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">确定</button> </form> </body> </html>
input元素创建按钮
<html> <head> <title>使用input元素创建按钮</title> </head> <body> <form name="myForm" action="submit.htm"> 关键字：<input type="text" name="myText1"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="确定"> </form> </body> </html>
网页调色板
<html> <head> <title>网页调色板</title> <script language="javascript" type="text/javascript"> <!-- function colorChange() { //设置文字颜色 document.fgColor = document.myForm.fgColors.value; //设置背景颜色 document.bgColor = document.myForm.bgColors.value; } --> </script> </head> <body> <form name="myForm" > <h1 align="center">文档对象</h1> Document对象是代表一个浏览器窗口或框架中的显示的HTML文件的对象。JavaScript会为每个HTML文档自动创建一个Document对象。通过Document对象可以操作HTML文档中的内容及其他对象。<br> 文字颜色：<input type="text" value="#fffff" name="fgColors"><br> 背景颜色：<input type="text" value="#000000" name="bgColors"><br> <input type="button" value="调色" onClick="colorChange()"> </form> </body> </html>
改变多行文本框大小
<html> <head> <title>改变多行文本框大小</title> <script language="javascript" type="text/javascript"> <!-- function resizeTextarea(resizeType) { if (resizeType=="big") { if (document.myForm.Context.rows<40) { document.myForm.Context.rows += 5; } } else if (resizeType=="small") { if (document.myForm.Context.rows>5) { document.myForm.Context.rows -= 5; } } } --> </script> </head> <body> <form name="myForm"> <input type="button" value="+" onClick="resizeTextarea('big')"> <input type="button" value="-" onClick="resizeTextarea('small')"><br> <textarea rows="10" cols="60" name="Context"></textarea> </form> </body> </html>
单选按钮和复选按钮：
name属性值相同的单选按钮为同一组单选按钮，name属性值相同的复选框为同一组的复选框。
checked属性可以设置默认选项。
单选按钮和复选框的属性，方法，事件：……。
单选按钮和复选框
<html> <head> <title>创建单选框和复选框</title> </head> <body> <form name="myForm"> 请选择性别：<br> <input type="radio" value="男" name="mySex">男<br> <input type="radio" value="女" name="mySex">女<br><br> 请选择您常用的浏览器：<br> <input type="radio" value="IE" name="myNavigator">IE<br> <input type="radio" value="Netscape" name="myNavigator">Netscape<br> <input type="radio" value="Firefox" name="myNavigator">Firefox<br> <input type="radio" value="Opera" name="myNavigator">Opera<br><br> 喜欢的阅读方式：<br> <input type="checkbox" value="book" name="myRead">图书<br> <input type="checkbox" value="web" name="myRead">网络<br> <input type="checkbox" value="TV" name="myRead">电视<br> </form> </body> </html>
checked默认选项
<html> <head> <title>设置单选框与复选框的默认选项</title> </head> <body> <form name="myForm"> 请选择性别：<br> <input type="radio" value="男" name="mySex" checked>男<br> <input type="radio" value="女" name="mySex">女<br><br> 请选择您常用的浏览器：<br> <input type="radio" value="IE" name="myNavigator">IE<br> <input type="radio" value="Netscape" name="myNavigator">Netscape<br> <input type="radio" value="Firefox" name="myNavigator">Firefox<br> <input type="radio" value="Opera" name="myNavigator">Opera<br><br> 喜欢的阅读方式：<br> <input type="checkbox" value="book" name="myRead">图书<br> <input type="checkbox" value="web" name="myRead" checked>网络<br> <input type="checkbox" value="TV" name="myRead" checked>电视<br> </form> </body> </html>
与Form对象
<html> <head> <title>Form对象与单选框、复选框对象</title> </head> <body> <form name="myForm"> 请选择性别：<br> <input type="radio" value="男" name="mySex" checked>男<br> <input type="radio" value="女" name="mySex">女<br><br> 喜欢的阅读方式：<br> <input type="checkbox" value="book" name="myRead">图书<br> <input type="checkbox" value="web" name="myRead" checked>网络<br> <input type="checkbox" value="TV" name="myRead" checked>电视<br> </form> <script language="javascript" type="text/javascript"> <!-- for (i=0;i<document.myForm.length;i++) { document.write("元素",i,"的名称为：",document.myForm.elements[i].name,"，值为：",document.myForm.elements[i].value,"<br>"); } --> </script> </body> </html>
组与选项
<html> <head> <title>组与选项</title> </head> <body> <form name="myForm"> 请选择性别：<br> <input type="radio" value="男" name="mySex" checked>男<br> <input type="radio" value="女" name="mySex">女<br><br> 喜欢的阅读方式：<br> <input type="checkbox" value="book" name="myRead">图书<br> <input type="checkbox" value="web" name="myRead" checked>网络<br> <input type="checkbox" value="TV" name="myRead" checked>电视<br> </form> <script language="javascript" type="text/javascript"> <!-- //查看单选框组中的所有元素 for (i=0;i<document.myForm.mySex.length;i++) { document.write("元素",i,"的名称为：",document.myForm.mySex[i].name,"，值为：",document.myForm.mySex[i].value,"<br>"); } //查看复选框组中的所有元素 for (i=0;i<document.myForm.myRead.length;i++) { document.write("元素",i,"的名称为：",document.myForm.myRead[i].name,"，值为：",document.myForm.myRead[i].value,"<br>"); } --> </script> </body> </html>
获取被选的值
<html> <head> <title>获取单选框与复选框的值</title> </head> <body> <form name="myForm"> 请选择性别：<br> <input type="radio" value="男" name="mySex">男<br> <input type="radio" value="女" name="mySex">女<br><br> 喜欢的阅读方式：<br> <input type="checkbox" value="图书" name="myRead">图书<br> <input type="checkbox" value="网络" name="myRead">网络<br> <input type="checkbox" value="电视" name="myRead">电视<br><br> <input type="button" value="确定" onClick="boxValue()"> </form> <script language="javascript" type="text/javascript"> <!-- function boxValue() { //遍历单选框中的所有选项 for (i=0;i<document.myForm.mySex.length;i++) { //判断单选框是否被选择 if (document.myForm.mySex[i].checked) { alert("单选框中您选择了“" + document.myForm.mySex[i].value + "”选项"); break; } } var checkBoxValue = ""; //遍历复选框中的所有选项 for (i=0;i<document.myForm.myRead.length;i++) { //判断复选框是否被选择 if (document.myForm.myRead[i].checked) { checkBoxValue +=document.myForm.myRead[i].value + " "; } } if (checkBoxValue!="") { alert("复选框中您选择了“" + checkBoxValue + "”选项"); } } --> </script> </body> </html>
限制复选框可选项数
<html> <head> <title>获取单选框与复选框的值</title> </head> <body> <form name="myForm"> 您的爱好是什么？（最多同时选三项）<br> <input type="checkbox" value="看书" name="like" onClick="return checkDate(this)">看书<br> <input type="checkbox" value="上网" name="like" onClick="return checkDate(this)">上网<br> <input type="checkbox" value="看电视" name="like" onClick="return checkDate(this)">看电视<br> <input type="checkbox" value="下棋" name="like" onClick="return checkDate(this)">下棋<br> <input type="checkbox" value="钓鱼" name="like" onClick="return checkDate(this)">钓鱼<br> <input type="checkbox" value="打牌" name="like" onClick="return checkDate(this)">打牌<br> <input type="checkbox" value="发呆" name="like" onClick="return checkDate(this)">发呆<br> </form> <script language="javascript" type="text/javascript"> <!-- function checkDate(checkboxName) { var checkCount = 0; for(i=0;i<document.myForm.like.length;i++) { if (document.myForm.like[i].checked) { checkCount ++; } } if (checkCount>3) { alert("最多只能选择三项"); return false; } } --> </script> </body> </html>
下拉列表框：
下拉列表框Select，列表框中的选项Option。
下拉列表框的属性，方法，事件：……。
下拉列表框
<html> <head> <title>创建下拉列表框</title> </head> <body> <form name="myForm"> 您的爱好是什么？<br> <select name="like"> <option value="看书">看书</option> <option value="上网">上网</option> <option value="看电视">看电视</option> <option value="下棋">下棋</option> <option value="钓鱼">钓鱼</option> <option value="打牌">打牌</option> <option value="发呆">发呆</option> </select> </form> </body> </html>
下拉列表框2
<html> <head> <title>创建下拉列表框</title> </head> <body> <form name="myForm"> 您的爱好是什么？<br> <select name="like"> <option>游泳</option> </select> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- var option1 = new Option("看书","看书"); //该选项是下拉列表框中的默认选项，单击重置按钮时会恢复到该选项上 var option2 = new Option("上网","上网",true); var option3 = new Option("看电视","看电视"); var option4 = new Option("下棋","下棋"); //该选项是当前选中的选项 var option5 = new Option("钓鱼","钓鱼",false,true); var option6 = new Option("打牌","打牌"); document.myForm.like.options[0] = option1; document.myForm.like.options[1] = option2; document.myForm.like.options[2] = option3; document.myForm.like.options[3] = option4; document.myForm.like.options[4] = option5; document.myForm.like.options[5] = option6; document.myForm.like.options[7] = new Option("发呆","发呆"); --> </script> </body> </html>
下拉列表框3
<html> <head> <title>创建下拉列表框</title> </head> <body> <form name="myForm"> 您的爱好是什么？<br> <select name="like"> <option>游泳</option> </select> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- //创建数组 var optionArr = new Array(); optionArr[0] = ["看书","看书"]; optionArr[1] = ["上网","上网"]; optionArr[2] = ["看电视","看电视"]; optionArr[3] = ["下棋","下棋"]; optionArr[4] = ["钓鱼","钓鱼"]; optionArr[5] = ["打牌","打牌"]; optionArr[6] = ["发呆","发呆"]; //通过循环为下拉列表框创建选项 for (i=0;i<6;i++) { document.myForm.like.options[i] = new Option(optionArr[i][0],optionArr[i][1]); } //单独为下拉列表框创建选项 document.myForm.like.options[7] = new Option(optionArr[6][0],optionArr[6][1]); //设置下拉列表框中的第2个选项为默认选项，重置表单时该选项会被选择 document.myForm.like.options[1].defaultSelected = true; //设置下拉列表框中的第5个选项为当前选中的选项 document.myForm.like.options[4].selected = true; --> </script> </body> </html>
同时显示多行
<html> <head> <title>同时显示多行的下拉列表框</title> </head> <body> <form name="myForm"> 您的爱好是什么？<br> <select name="like"> <option value="看书">看书</option> <option value="上网">上网</option> <option value="看电视">看电视</option> <option value="下棋">下棋</option> <option value="钓鱼">钓鱼</option> <option value="打牌">打牌</option> <option value="发呆">发呆</option> </select><br><br> <select name="likes" size="4"> <option value="看书">看书</option> <option value="上网">上网</option> <option value="看电视">看电视</option> <option value="下棋">下棋</option> <option value="钓鱼">钓鱼</option> <option value="打牌">打牌</option> <option value="发呆">发呆</option> </select><br><br> </form> <script language="javascript" type="text/javascript"> <!-- document.write("第1个下拉列表框的类型为：",document.myForm.elements[0].type,"，同时显示的行数为：",document.myForm.elements[0].size,"<br>"); document.write("第2个下拉列表框的类型为：",document.myForm.elements[1].type,"，同时显示的行数为：",document.myForm.elements[1].size,"<br>"); --> </script> </body> </html>
多选列表框
<html> <head> <title>同时显示多行的下拉列表框</title> </head> <body> <form name="myForm"> 您的爱好是什么？<br> <select name="like" size="7"> <option value="看书">看书</option> <option value="上网" selected>上网</option> <option value="看电视">看电视</option> <option value="下棋">下棋</option> <option value="钓鱼" selected>钓鱼</option> <option value="打牌">打牌</option> <option value="发呆">发呆</option> </select><br><br> <select name="likes" size="7" multiple> <option value="看书">看书</option> <option value="上网" selected>上网</option> <option value="看电视">看电视</option> <option value="下棋">下棋</option> <option value="钓鱼" selected>钓鱼</option> <option value="打牌">打牌</option> <option value="发呆" selected>发呆</option> </select><br><br> </form> <script language="javascript" type="text/javascript"> <!-- document.write("第1个下拉列表框的类型为：",document.myForm.elements[0].type,"<br>"); document.write("第2个下拉列表框的类型为：",document.myForm.elements[1].type,"<br>"); --> </script> </body> </html>
翻页功能
<html> <head> <title>利用下拉列表框翻页</title> <script language="javascript" type="text/javascript"> <!-- function goPage() { //获得下拉列表框的value属性值，即被选择的可选项的值 goUrl = document.myForm.goto.value; if (goUrl!="") { //跳转页面 location.href=goUrl; } } --> </script> </head> <body> <form name="myForm"> <select name="goto" onChange="goPage()"> <option value="">请选择您要跳转的网页</option> <option value="sample01.htm">sample01.htm</option> <option value="sample02.htm">sample02.htm</option> <option value="sample03.htm">sample03.htm</option> <option value="sample04.htm">sample04.htm</option> <option value="sample05.htm">sample05.htm</option> <option value="sample06.htm">sample06.htm</option> <option value="sample07.htm">sample07.htm</option> </select> </form> </body> </html>
简单的选课程序
<html> <head> <title>简单的选课程序</title> <script language="javascript" type="text/javascript"> <!-- //将选课从“可选课程”下拉列表框移到“已选课框”下拉列表框中 function toMyCourse() { //判断“可选课程”下拉列表框的选项个数 var courseCount = document.myForm.course.length; //从“可选课程”下拉列表框的最后一个选项开始循环，到第1个选项为止 for(i=courseCount-1;i>-1;i--) { //如果该选项处于选择状态，则执行以下代码 if (document.myForm.course[i].selected) { //创建一个新的Option对象，该对象的text与value属性值为当前“可选课程”下拉列表框的选项的text与value属性值 var myOption = new Option(document.myForm.course[i].text,document.myForm.course[i].value); //在“已选课程”下拉列表框中添加一个选项 document.myForm.myCourse.options[document.myForm.myCourse.options.length]=myOption; //删除当前选项 document.myForm.course.remove(i); } } } //将选课从“已选课框”下拉列表框移到“可选课框”下拉列表框中 function toCourse() { var myCourseCount = document.myForm.myCourse.length - 1; for(i=myCourseCount;i>-1;i--) { if (document.myForm.myCourse[i].selected) { var myOption = new Option(document.myForm.myCourse[i].text,document.myForm.myCourse[i].value); document.myForm.course.options[document.myForm.course.options.length]=myOption; document.myForm.myCourse.remove(i); } } } --> </script> </head> <body> <form name="myForm"> <table> <tr> <td>可选课程</td> <td></td> <td>已选课程</td> </tr> <tr> <td> <select name="course" size="7" multiple> <option value="语文">语文</option> <option value="数学">数学</option> <option value="英语">英语</option> <option value="化学">化学</option> <option value="物理">物理</option> <option value="政治">政治</option> <option value="音乐">音乐</option> </select> </td> <td> <input type="button" value=">>" onClick="toMyCourse()"><br> <input type="button" value="<<" onClick="toCourse()"> </td> <td> <select name="myCourse" size="7" multiple> </select> </td> </tr> </table> </form> </body> </html>
联动菜单程序
<html> <head> <title>联动菜单</title> </head> <body> <form name="myForm"> <select name="chapter" onChange="setSection(this.selectedIndex)"> </select> <select name="section"> </select> </form> <script language="javascript" type="text/javascript"> <!-- //创建数组，以下几个数组都用于存放Option对象的text和value属性值 //本数组为第1个下拉列表框中选择第1个选项时，第2个下拉列表框中的Option对象的text和value属性值 var section1 = new Array(); section1[0] = ["1.1 脚本语言的介绍","section1.1"] section1[1] = ["1.2 JavaScript的作用","section1.2"] section1[2] = ["1.3 JavaScript的版本与支持","section1.3"] //本数组为第1个下拉列表框中选择第2个选项时，第2个下拉列表框中的Option对象的text和value属性值 var section2 = new Array(); section2[0] = ["2.1 常量","section2.1"] section2[1] = ["2.2 变量","section2.2"] section2[2] = ["2.3 数据类型","section2.3"] //本数组为第1个下拉列表框中选择第3个选项时，第2个下拉列表框中的Option对象的text和value属性值 var section3 = new Array(); section3[0] = ["3.1 表达式","section3.1"] section3[1] = ["3.2 操作数","section3.2"] section3[2] = ["3.3 运算符介绍","section3.3"] //本数组为第1个下拉列表框中的Option对象的text和value属性值 //数组中的第3个元素用于指定在选择第1个下拉列表框选项时，第2个下拉列表框应该显示哪个数组中的元素 var chapterArr = new Array(); chapterArr[0] = ["第1章 JavaScript基础","chapter1",section1]; chapterArr[1] = ["第2章 常量、变量与数据类型","chapter2",section2]; chapterArr[2] = ["第3章 表达式与运算符","chapter3",section3]; //设置菜单联动 function setSection(chapter) { //清除第2个下拉列表框中的所有选项 for (var i=document.myForm.section.length-1;i>-1;i--) { document.myForm.section.remove(i); } //调用数组 var arr = chapterArr[chapter][2]; //通过循环添加选项 for (var i=0;i<arr.length;i++) { document.myForm.section.options[i] = new Option(arr[i][0],arr[i][1]); } } //初始化第1个下拉列表框 for (var i=0;i<chapterArr.length;i++) { document.myForm.chapter.options[i] = new Option(chapterArr[i][0],chapterArr[i][1]); } //初始化第2个下拉列表框 setSection(0); --> </script> </body> </html>
文件上传框：
文件上传框属性，方法，事件：……。
文件上传框
<html> <head> <title>创建文件上传框</title> </head> <body> <form name="myForm" enctype="mulitipart/form-data" method="post"> 请选择文件：<input type="file" name="myFile" size="40"> </form> </body> </html>
图片预览程序
<html> <head> <title>图片预览</title> <script language="javascript" type="text/javascript"> <!-- function lookImg() { //获得选择的文件的URL var fileURL = document.myForm.myFile.value; //获得文件的扩展名 fileURLSplit = fileURL.split("."); fileExt = fileURLSplit[fileURLSplit.length-1].toLowerCase(); //判断是否是图片文件 if (fileExt=="jpg" || fileExt=="gif" || fileExt=="bmp") { //图片预览 document.images[0].src = fileURL; } else { alert("请选择jpg、gif或bmp图片文件"); } } --> </script> </head> <body> <form name="myForm" enctype="mulitipart/form-data" method="post"> 请选择图片：<input type="file" name="myFile" onChange="lookImg()"><br> <img src="img/img.gif"> </form> </body> </html>
隐藏域：
Hidden隐藏域对象是不会在浏览器窗口中显示的对象，多用于向服务器提交一些不希望用户看到的数据。在HTML源代码中可以查看到。
隐藏域属性：……。
隐藏域
<html> <head> <title>隐藏域</title> </head> <body> <form name="myForm"> <input type="hidden" name="myHidden" value="hello"> </form> <script language="javascript" type="text/javascript"> <!-- document.write(document.myForm.myHidden.value); --> </script> </body> </html>
输入提示程序
<html> <head> <title>输入提示</title> <script language="javascript"> function inputCheck() { //如果隐藏域中的value属性值为空，则是第1次输入文字 if (myForm.oldName.value.length==0) { alert("您是第一次输入姓名，本次输入的姓名为：" + myForm.myName.value) } else { //如果隐藏域中的value属性值不为空，则显示其中内容 alert("您上次输入的姓名为：" + myForm.oldName.value+"\n本次输入的姓名为："+myForm.myName.value) } //设置隐藏域中的value属性值 myForm.oldName.value = myForm.myName.value; } </script> </head> <body> <form name="myForm"> 请输入您的姓名：<input type="text" name="myName"> <input type="hidden" name="oldName" value=""> <input type="button" onClick="inputCheck()" value="确定"> </form> </body> </html>
分组元素框：
<fieldset></fieldset>：分组框。
表单分组示例
<html> <head> <title>表单分组</title> </head> <body> <form name="myform"> <p align="center">用户注册</p> 必填信息：<br> <fieldset name="fieldset1"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> </fieldset><br> 详细信息：<br> <fieldset name="fieldset2"> 性别： <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br> QQ号码：<input type="text" name="qq"><br> </fieldset><br> 基本设置：<br> <fieldset name="fieldset3"> 选择Cookies的保留时间： <input type="radio" name="cookies" value="day">一天 <input type="radio" name="cookies" value="month">一个月 <input type="radio" name="cookies" value="year">一年 <input type="radio" name="cookies" value="none">不保留 <br> </fieldset> </form> <script language="javascript"> document.write("本例中的Form对象的elements元素共有：",myform.elements.length,"个<br>"); document.write("这些表单元素分别为：<br>"); for (i=0;i<myform.elements.length-1;i++) { document.write("名为：",myform.elements[i].name,"的",myform.elements[i].type,"元素<br>"); } </script> </body> </html>
<legend></legend>：描述分组信息。
含分组信息的框
<html> <head> <title>表单分组</title> </head> <body> <form name="myform"> <p align="center">用户注册</p> <fieldset name="fieldset1"> <legend>必填信息</legend> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> </fieldset><br> <fieldset name="fieldset2"> <legend>详细信息</legend> 性别： <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br> QQ号码：<input type="text" name="qq"><br> </fieldset><br> <fieldset name="fieldset3"> <legend>基本设置</legend> 选择Cookies的保留时间： <input type="radio" name="cookies" value="day">一天 <input type="radio" name="cookies" value="month">一个月 <input type="radio" name="cookies" value="year">一年 <input type="radio" name="cookies" value="none">不保留 <br> </fieldset> </form> <script language="javascript"> document.write("本例中的Form对象的elements元素共有：",myform.elements.length,"个<br>"); document.write("这些表单元素分别为：<br>"); for (i=0;i<myform.elements.length-1;i++) { document.write("名为：",myform.elements[i].name,"的",myform.elements[i].type,"元素<br>"); } </script> </body> </html>
窗口与框架：
Window对象：
window对象代表的是打开的浏览器窗口，通过window对象可以控制窗口的大小和位置，对话框，打开关闭窗口，地址栏，工具栏，状态栏等。
window对象，document对象，location对象，history对象和screen对象都属于客户端对象，不需要用new实例化，可以直接使用“window.属性名/方法名"
window对象属性：
window对象方法：
window对象的事件：
装载文档
<html>
<head>
<title>装载文档</title>
<script language="javascript" type="text/javascript">
<!--
function myLoad()
{
myDiv.style.display="none";
}
-->
</script>
</head>
<body onLoad="myLoad()">
<!--在网页上显示一个图片-->
<img src="img/flower.jpg" name="myImg">
<!--设置一个层，该层盖在图片之上，当整个网页都加载完毕之后，再将该层隐去，显示出图片-->
<div style="position:absolute;background-color:white;width:320px;height:220px;left:0px;top:0px" id="myDiv">
正在加载网页……
</div>
<script language="javascript" type="text/javascript">
<!--
/*
此处代码在正式文档中可以省略，在此处的作用是延迟显示效果。
只有在单击警告框中的“确定”按钮之后，整个网页才算完全加载完毕。
也只有在整个网页加载完毕之后，才会激发load事件。
*/
alert("网页加载完毕，显示图片");
-->
</script>
</body>
</html>
框架页
// <html> <head> <title>框架的load事件</title> </head> <frameset cols="50%,*" onLoad="alert('打开框架页')"> <frame src="sample02_left.htm"> <frame src="sample02_right.htm"> </frameset><noframes></noframes> </html> // <html> <head> <title>框架的load事件</title> </head> <body onLoad="alert('打开左框架页')"> 左框架页 </body> </html> // <html> <head> <title>框架的load事件</title> </head> <body onLoad="alert('打开右框架页')"> 右框架页 </body> </html>
卸载文档
<html>
<head>
<title>卸载文档</title>
</head>
<body onUnload="alert('欢迎您再来')">
<a href="sample01.htm">例一</a>
</body>
</html>
焦点
<html>
<head>
<title>得到焦点与失去焦点</title>
<script language="javascript" type="text/javascript">
<!--
//在网页中输出100行文字
for (var i=0;i<100;i++)
{
document.write("第" + (i+1) + "行<br>")
}
//以下代码用于滚动屏幕
var pos,timer;
//初始化
function initialize()
{
timer = setInterval("windowscroll()",50);
}
//滚动屏幕
function windowscroll()
{
pos = document.body.scrollTop;
window.scroll(0,++pos);
if (pos != document.body.scrollTop)
{
myScroll();
}
}
//停止滚动屏幕
function myScroll()
{
clearInterval(timer);
}
-->
</script>
</head>
<body onFocus="initialize()" onBlur="myScroll()">
</body>
</html>
调整窗口大小
<html>
<head>
<title>调整窗口大小</title>
<script language="javascript" type="text/javascript">
<!--
function windowSize()
{
if (confirm("该页面适合使用800*600的大小观看，是否调整到800*600"))
{
window.resizeTo(800,600);
}
}
-->
</script>
</head>
<body onResize="windowSize()">
</body>
</html>
错误处理
<html>
<head>
<title>错误处理</title>
<script language="javascript" type="text/javascript">
<!--
window.onerror = showErr;
function showErr(errMessage,errUrl,errLine)
{
var str = "JavaScript程序出错：\n"
str += "错误信息：" + errMessage + "\n";
str += "产生错误的文件：" + errUrl + "\n";
str += "产生错误的行数：" + errLine + "\n";
alert(str);
return true;
}
//以下是一个错误语句，因为变量a和b都没有定义。
var err = a*b;
-->
</script>
</head>
<body>
</body>
</html>
对话框：
window.alert(message)
警告框
<html>
<head>
<title>警告框</title>
<script language="javascript" type="text/javascript">
<!--
function showMessage(message)
{
window.alert(message);
}
-->
</script>
</head>
<body onLoad="showMessage('进入网页')">
<input type="button" onClick="window.alert('单击了第一个按钮')" value="第一个按钮">
<input type="button" onClick="alert('单击了第二个按钮')" value="第二个按钮">
</body>
</html>
window.confirm(message)
确认框
<!-- onsubmit属性， myForm.myPassword.value.length==0-->
<html>
<head>
<title>确认框</title>
<script language="javascript" type="text/javascript">
<!--
function checkData()
{
if (myForm.myName.value.length==0 || myForm.myPassword.value.length==0)
{
if (confirm("您的表单未填写完毕，是否确定提交？"))
{
return true;
}
else
{
return false;
}
}
}
-->
</script>
</head>
<body>
<form name="myForm" action="submit.htm" onSubmit="return checkData()">
姓名：<input type="text" name="myName"><br>
密码：<input type="password" name="myPassword"><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>
window.prompt（message，defaultText）
提示框
<html>
<head>
<title>提示框</title>
<script language="javascript" type="text/javascript">
<!--
var strName = prompt("请输入您的姓名","");
if (strName == null)
{
document.write("您取消了姓名输入");
}
else if (strName == "")
{
document.write("您没有输入您的姓名");
}
else
{
document.write("欢迎您：" + strName);
}
-->
</script>
</head>
<body>
</body>
</html>
状态栏：
状态栏默认信息：window.defaultStatus
1
<html>
<head>
<title>默认状态栏文本</title>
<script language="javascript" type="text/javascript">
<!--
var defaultText = prompt("请输入默认状态栏信息","");
window.defaultStatus = defaultText;
alert("默认的状态栏信息为：" + window.defaultStatus);
-->
</script>
</head>
<body>
</body>
</html>
状态栏瞬间信息：window.status
2
<html> <head> <title>状态栏瞬间信息</title> <script language="javascript" type="text/javascript"> <!-- window.defaultStatus = "现在是状态栏的默认信息"; function setStatus(message) { window.status = message; return true; } --> </script> </head> <body> <a href="sample01.htm">没有设置状态栏瞬间信息的超链接</a><br> <a href="sample01.htm" onMouseOver="return setStatus('第2个超链接')">设置了状态栏瞬间信息的超链接</a><br> <a href="sample01.htm" onMouseOver="setStatus('第3个超链接')">设置了状态栏瞬间信息的超链接，但没有返回值</a><br> <input type="button" value="按钮" onMouseOver="return setStatus('我是一个按钮')"> </body> </html>
窗口操作：
新建窗口window.open
1
<html> <head> <title>新开一个空白窗口</title> </head> <body> <a href="#" onClick="window.open()">新开一个空白窗口</a><br> </body> </html>
2
<html> <head> <title>新开一个命名窗口</title> </head> <body> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300')">新开一个指定大小的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes')">新开一个指定大小的、有菜单栏的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes,status=yes')">新开一个指定大小的、有菜单栏的、有状态栏的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes,resizable=no')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的、不能调整大小的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes,resizable=yes')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的、可以调整大小的窗口</a><br> <a href="#" onClick="window.open('window_1.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes,location=yes')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的、有地址栏的窗口</a><br> <a href="#" onClick="window.open('sample05.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes,location=yes,scrollbars=yes')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的、有地址栏的、有滚动条的窗口</a><br> <a href="#" onClick="window.open('sample05.htm','','width=300,height=300,menubar=yes,status=yes,toolbar=yes,location=yes,scrollbars=no')">新开一个指定大小的、有菜单栏的、有状态栏的、有工具栏的、有地址栏的、无滚动条的窗口</a><br> </body> </html>
关闭窗口：window.close
3
<html> <head> <title>关闭窗口</title> </head> <body> <input type="button" value="关闭窗口" onClick="window.close()"> </body> </html>
4
<html> <head> <title>关闭窗口</title> <script language="javascript" type="text/javascript"> <!-- var myWin; //打开窗口 function openWindow() { myWin = window.open("window_1.htm","myWindow","width=300,height=300"); } //关闭窗口 function closeWindow() { //判断myWin变量是否已经赋值 if (myWin==undefined) { alert("没有打开新窗口，请先单击【打开窗口】按钮"); } else if (myWin.closed) //判断窗口是否已经关闭 { alert("窗口已经关闭"); } else { myWin.close(); } } --> </script> </head> <body> <input type="button" value="打开窗口" onClick="openWindow()"> <input type="button" value="关闭窗口" onClick="closeWindow()"> </body> </html>
窗口的引用：
5
<html> <head> <title>在打开的窗口里输入文字</title> <script language="javascript" type="text/javascript"> <!-- function openWindow() { var myWin = window.open("","myWindow","width=300,height=300"); myWin.document.write("输入一行文字"); } --> </script> </head> <body> <input type="button" value="打开窗口" onClick="openWindow()"> </body> </html>
6
<html> <head> <title>调试JavaScript代码</title> <script language="javascript" type="text/javascript"> <!-- function tryCode() { var myWin = window.open(); myWin.document.write("<script language=\"javascript\" type=\"text/javascript\">"); myWin.document.write(myForm.jsCode.value); myWin.document.write("</script>"); } --> </script> </head> <body> <form name="myForm"> <textarea name="jsCode" rows="10" cols="30">alert("测试")</textarea><br> <input type="button" value="查看效果" onClick="tryCode()"> </form> </body> </html>
移动窗口：
7
<html> <head> <title>滚动文档</title> </head> <body> <form name="myForm"> 横坐标：<input type="text" name="scrollX" value="10" size="5"><br> 纵坐标：<input type="text" name="scrollY" value="10" size="5"><br> <input type="button" value="滚动到绝对位置" onClick="GoTo()"> <input type="button" value="滚动到相对位置" onClick="GoBy()"> </form> <pre> <script language="javascript" type="text/javascript"> <!-- //在网页中输出100行文字，用于产生竖向滚动条 for (var i=0;i<100;i++) { document.write("第" + (i+1) + "行："); //输出空格，用于产生横向滚动条 for (var j=0;j<100;j++) { document.write(" "); } document.write("<br>"); } function GoTo() { window.scrollTo(myForm.scrollX.value,myForm.scrollY.value); } function GoBy() { window.scrollBy(myForm.scrollX.value,myForm.scrollY.value); } --> </script> </pre> </body> </html>
8
<html> <head> <title>移动窗口</title> <script language="javascript" type="text/javascript"> <!-- function GoTo() { window.moveTo(myForm.moveX.value,myForm.moveY.value); } function GoBy() { window.moveBy(myForm.moveX.value,myForm.moveY.value); } --> </script> </head> <body> <form name="myForm"> 横坐标：<input type="text" name="moveX" value="10" size="5"><br> 纵坐标：<input type="text" name="moveY" value="10" size="5"><br> <input type="button" value="移动到绝对位置" onClick="GoTo()"> <input type="button" value="移动到相对位置" onClick="GoBy()"> </form> </body> </html>
调整窗口：
9
<html> <head> <title>调整窗口大小</title> <script language="javascript" type="text/javascript"> <!-- function GoTo() { window.resizeTo(myForm.windowWidth.value,myForm.windowHeight.value); } function GoBy() { window.resizeBy(myForm.windowWidth.value,myForm.windowHeight.value); } --> </script> </head> <body> <form name="myForm"> 宽度：<input type="text" name="windowWidth" value="300" size="5"><br> 高度：<input type="text" name="windowHeight" value="300" size="5"><br> <input type="button" value="调整到绝对大小" onClick="GoTo()"> <input type="button" value="调整到相对大小" onClick="GoBy()"> </form> </body> </html>
超时与时间间隔：
延迟：
1
<html> <head> <title>延迟执行</title> <script language="javascript" type="text/javascript"> <!-- function showName() { setTimeout("alert('您的姓名为：' + myForm.myName.value)",3000); } --> </script> </head> <body> <form name="myForm"> 姓名：<input type="text" name="myName" value="刘智勇"> <input type="button" value="确定" onClick="showName()"> </form> </body> </html>
周期执行：
2
<html> <head> <title>周期执行</title> <script language="javascript" type="text/javascript"> <!-- function myFun() { setInterval("setDate()",1000); } function setDate() { var myDate = new Date(); myForm.showDate.value = myDate.toLocaleString(); } --> </script> </head> <body onLoad="myFun()"> <form name="myForm"> 当前时间为：<input type="text" name="showDate" size="25"> </form> </body> </html>
3
<html> <head> <title>停止周期执行代码</title> <script language="javascript" type="text/javascript"> <!-- //times变量用来设置计时 var times; //intervalid变量用来返回setInterval()方法的值。根据该值可以停止周期执行代码 var intervalid; function showName() { //设置3秒后弹出警告框 times = 3; //始初化倒计时文本框中的数字 myForm.showTime.value = times; //每隔一秒执行一次setTime()函数，即让倒计时文本框中的数字倒计时 intervalid = setInterval("setTime()",1000); } function setTime() { //时间计数减1 times--; //在倒计时文本框中显示剩余时间 myForm.showTime.value = times; //判断剩余时间是否为0 if (times==0) { //如果剩余时间为0，停止倒计时文本框中的计数 clearInterval(intervalid); //弹出警告框 alert("您的姓名为：" + myForm.myName.value); } } --> </script> </head> <body> <form name="myForm"> 姓名：<input type="text" name="myName" value="刘智勇"> <input type="button" value="确定" onClick="showName()"><br> <input type="text" name="showTime" size="1" value="3">秒后弹出警告框 </form> </body> </html>
4
<html> <head> <title>延迟执行</title> <script language="javascript" type="text/javascript"> <!-- var intervalid; function showName() { intervalid = setTimeout("alert('您的姓名为：' + myForm.myName.value)",3000); } function showNameStop() { clearTimeout(intervalid); } --> </script> </head> <body> <form name="myForm"> 姓名：<input type="text" name="myName" value="刘智勇"> <input type="button" value="确定" onClick="showName()"> <input type="button" value="取消弹出警告框" onClick="showNameStop()"> </form> </body> </html>
框架操作：
1
<html> <head> <title>框架页</title> </head> <!--将浏览器窗口水平划分为两个部分--> <frameset rows="20%,*"> <!--水平划分的第一个部分加载sample37_top.htm文件--> <frame src="sample37_top.htm" name="top"> <!--水平划分的第二个部分并没有加载文件，是再垂直划分为两个部分--> <frameset cols="30%,*"> <!--垂直划分的第一个部分加载sample37_left.htm文件--> <frame src="sample37_left.htm" name="left"> <!--垂直划分的第二个部分加载sample37_right.htm文件--> <frame src="sample37_right.htm" name="right"> </frameset> </frameset><noframes></noframes> </html>
Window对象的子对象：
Screen屏幕对象：
View Code
<html> <head> <title>客户端显示器屏幕的有效宽度和高度</title> <script language="javascript" type="text/javascript"> <!-- document.write("您的屏幕的宽度和高度为：" + screen.width + "*" + screen.height + "<br>"); document.write("您的屏幕的有效宽度和高度为：" + screen.availWidth + "*" + screen.availHeight + "<br>"); --> </script> </head> <body> </body> </html>
View Code
<html> <head> <title>综合应用</title> <script language="javascript" type="text/javascript"> <!-- //获得屏幕的宽度 var ScreenWidths = screen.width; //获得屏幕的有效高度 var ScreenAvailHeight = screen.availHeight; //获得屏幕的有效高度 var ScreenAvailWidth = screen.availWidth; //根据不同的分辨率输出不同的内容。 if (ScreenWidths == 1024) { document.write("您正在使用的屏幕分辨为：1024*768" ); } else if (ScreenWidths == 800) { document.write("您正在使用的屏幕分辨为：1024*768" ); } else { document.write("您正在使用的屏幕分辨为：" + screen.width + "*" + screen.height); } //将窗口移动到屏幕的左上角 window.moveTo(0,0); //根据显示器的有效宽度和高度自动调整浏览器窗口大小 window.resizeTo(ScreenAvailWidth,ScreenAvailHeight); --> </script> </head> <body> </body> </html>
Navigator浏览器对象：
View Code
<html> <head> <title>Navigator对象的属性</title> <script language="javascript" type="text/javascript"> <!-- document.write("<i>JavaScript中的Navigator对象的属性：</i><br><br>"); document.write("<b>浏览器器名：</b>" + navigator.appName + "<br>"); document.write("<b>浏览器器代码名：</b>" + navigator.appCodeName + "<br>"); document.write("<b>浏览器版本：</b>" + navigator.appVersion + "<br>"); document.write("<b>HTTP头：</b>" + navigator.userAgent+"<br>"); document.write("<b>操作平台：</b>" + navigator.platform+"<br><br>"); document.write("<i>IE浏览器中的Navigator对象的属性：</i><br><br>"); document.write("<b>是否支持Cookie：</b>" + navigator.cookieEnabled + "<br>"); document.write("<b>操作系统的默认语言：</b>" + navigator.systemLanguage + "<br>"); document.write("<b>用户使用的语言：</b>" + navigator.userLanguage + "<br><br>"); document.write("<i>Netscape浏览器中的Navigator对象的属性：</i><br><br>"); document.write("<b>是否支持Cookie：</b>" + navigator.cookieEnabled + "<br>"); document.write("<b>浏览器中默认的语言：</b>" + navigator.language + "<br>"); document.write("<b>MimeType：</b>" + navigator.mimeTypes + "<br>"); document.write("<b>plugins：</b>" + navigator.plugins + "<br>"); --> </script> </head> <body> </body> </html>
History历史对象：
View Code
<html> <head> <title>历史列表中的网址个数</title> <script language="javascript" type="text/javascript"> <!-- document.write("<br><br><br><br><br><br><br><br><br>"); document.write("当前浏览器窗口的历史列表中网址个数为：" + history.length); --> </script> </head> <body> </body> </html>
View Code
<html> <head> <title>前进与后退</title> </head> <body> <input type="button" value="后退到上一页" onClick="history.back()"> <input type="button" value="前进到下一页" onClick="history.forward()"> </body> </html>
View Code
<html> <head> <title>跳转</title> <script language="javascript" type="text/javascript"> <!-- function goHistory() { goSite = myForm.myText.value; history.go(goSite); } --> </script> </head> <body> <form name="myForm"> <input type="type" name="myText"> <input type="button" value="跳转" onClick="goHistory()"> </form> </body> </html>
Address地址对象：
View Code
<html> <head> <title>位置对象的属性</title> <script language="javascript" type="text/javascript"> <!-- document.write("当前文档的URL为：" + location.href + "<br>"); document.write("当前文档的协议为：" + location.protocol + "<br>"); document.write("当前文档的域名为：" + location.hostname + "<br>"); document.write("当前文档的端口号为：" + location.port + "<br>"); document.write("当前文档的域名和端口号为：" + location.host + "<br>"); document.write("当前文档的虚拟目录和文件名为：" + location.pathname + "<br>"); document.write("当前文档的命名锚为：" + location.hash + "<br>"); document.write("当前文档的参数为：" + location.search + "<br>"); --> </script> </head> <body> </body> </html>
Document文档对象：
文档对象的属性和方法：……。
文档中对象的引用方法：
每一个 HTML文档中可能出现很多种元素，Document对象将这些元素按以下方法分类：
HTML文档中每个form元素都在forms[]数组中创建一个Form对象，可以通过forms[]数组中的元素访问这些Form对象。
对于Form对象中的表单元素，则可以通过elements[]数组或表单元素名称两种方式引用。
HTML文档中每个a元素都会在links[]数组中创建一个对象。
HTML文档中每个命名锚都会在anchors[]数组中创建一个对象。
HTML文档中每个img元素都会在images[]数组中创建一个对象。
HTML文档中每个applet元素都会在applets[]数组中创建一个对象。
HTML文档中每个embed元素都会在embeds[]数组中创建一个对象。
View Code
<html> <head> <title>对象的引用方法</title> <script language="javascript" type="text/javascript"> <!-- function btClick1() { //获取第1个form对象的第1个元素的值 var Name = document.forms[0].elements[0].value; //也可以使用以下方法 //var Name = document.myForm1.myName.value; //var Name = document.forms[0].myName.value; //var Name = document.myForm1.elements[0].value; //var Name = document.forms["myForm1"].elements[0].value; //var Name = document.forms["myForm1"].myName.value; alert(Name); } function btClick2() { //获取名为myForm2的对象下的mySex的值 var sex = document.myForm2.mySex.value; //也可以使用以下方法 //var sex = document.forms[1].elements[0].value; //var sex = document.forms[1].mySex.value; //var sex = document.myForm2.elements[0].value; //var sex = document.forms["myForm2"].elements[0].value; //var sex = document.forms["myForm2"].mySex.value; alert(sex); } --> </script> </head> <body> <form name="myForm1"> 请输入姓名：<input type="text" name="myName"> <input type="button" value="确定" onClick="btClick1()"> </form> <form name="myForm2"> 请输入性别：<input type="text" name="mySex"> <input type="button" value="确定" onClick="btClick2()"> </form> </body> </html>
文档对象的应用：
1.设置超链接的颜色：linkColor，vlinkColor，alinkColor属性。
View Code
<html> <head> <title>设置超链接属性</title> <script language="javascript" type="text/javascript"> <!-- function setDoc() { document.alinkColor = document.myForm.alink.value; document.linkColor = document.myForm.mylink.value; document.vlinkColor = document.myForm.vlink.value; } --> </script> </head> <body> <form name="myForm"> 未访问过的超链接颜色：<input type="text" name="mylink" value="red"><br> 已访问过的超链接颜色：<input type="text" name="vlink" value="blue"><br> 激活的超链接颜色：<input type="text" name="alink" value="green"><br> <input type="button" value="确定" onClick="setDoc()"> </form> <a href="sample1.htm">未访问过的超链接</a> <a href="sample01.htm">已访问过的超链接</a> <a href="sample01.htm">激活的超链接</a> </body> </html>
2.网页背景颜色，默认文字颜色：bgColor，fgColor属性。
View Code
<html> <head> <title>设置网页背景颜色和默认文字颜色</title> <script language="javascript" type="text/javascript"> <!-- function setDoc() { document.bgColor = document.myForm.bgcolor.value; document.fgColor = document.myForm.fgcolor.value; } --> </script> </head> <body bgcolor="black" text="white"> <form name="myForm"> 网页背景颜色：<input type="text" name="bgcolor" value="red"><br> 默认文字颜色：<input type="text" name="fgcolor" value="blue"><br> <input type="button" value="确定" onClick="setDoc()"> </form> <font color="green">设置为绿色的文字</font> </body> </html>
3.文档信息：lastModified，title，URL属性。
View Code
<html> <head> <title>文档信息</title> <script language="javascript" type="text/javascript"> <!-- document.write("文档标题为：" + document.title + "<br>"); document.write("文档地址为：" + document.URL + "<br>"); document.write("文档最后更新时间为：" + document.lastModified + "<br>"); --> </script> </head> <body> </body> </html>
4.在标题栏状态栏显示滚动信息：title，window.status属性，window.setInterval()方法。
View Code
<html> <head> <title>滚动的标题</title> <script language="javascript" type="text/javascript"> <!-- //设置变量，用于控制循环显示标题 var step = 0; //将要显示的标题内容放在一个数组中，通过显示数组中的元素来显示标题 var titleText = ["您好！","欢迎光临","祝您身体健康"]; //设置用于循环显示标题的函数 function showTitle() { //如果数组下标等于数组长度，则让下标恢复到0 if (step==titleText.length) { step = 0; } //显示标题 document.title = titleText[step]; //如果使用以下代码，则可以在状态栏上显示滚动的信息 window.status = titleText[step]; //数组下标记数加1 step++; } //每隔一秒钟显示一次标题 setInterval("showTitle()",1000); --> </script> </head> <body> </body> </html>
5.防止盗链：URL，referrer属性，域名比较防止盗链
View Code
<html> <head> <title>防止盗链</title> <script language="javascript" type="text/javascript"> <!-- //当前文档的URL var currentURL = document.URL; //上一个文档的URL var frontURL = document.referrer; //如果上一个文档的URL为空，则是直接打开当前文档，则不存在盗链的问题。否则有可能是盗链。 if (frontURL!="") { //通过分割，将当前文档的URL各部分存放在currentURLs数组中。 var currentURLs = currentURL.split("/"); //通过分割，将上一个文档的URL各部分存放在frontURLs数组中。 var frontURLs = frontURL.split("/"); //两个数组的第3个元素都为URL的域名部分 //比较两个数组的第3个元素，如果域名相同，则不是盗链，否则就是盗链 if (currentURLs[2]==frontURLs[2]) { document.write("不是盗链，可以显示正常文档"); } else { document.write("您不是从本站中访问到该网址，请通过本部访问"); //可以使用以下代码跳转到网站的首页 //history.location = "http://" + currentURLs[2]; } } else { document.write("您是直接打开该文档的，不存在盗链问题"); } --> </script> </head> <body> </body> </html>
6.在网页中输出内容：write(),writeln()。
write()方法在文档中输出文字不会产生换行，writeln()方法在文档中输出文字时会产生换行。
但是writeln()方法中所产生的换行只是在HTML源代码中产生的，直接在HTML代码中看不出效果，出发加入了<pre></pre>保留格式。
加入..br..的换行
<html> <head> <title>在网页中输出文字</title> <script language="javascript" type="text/javascript"> <!-- var str = "由JavaScript输出的文字"; document.write(str,"<br>"); document.writeln(str,"<br>"); --> </script> </head> <body> 本行文字是在HTML代码中输出的文字 </body> </html>
HTML源码的换行
<html> <head> <title>在网页中输出文字</title> <script language="javascript" type="text/javascript"> <!-- document.write("使用write()方法"); document.write("产生的文字"); document.writeln("使用writeln()方法"); document.writeln("产生的文字"); --> </script> </head> <body> 在HTML代码中输出的文字 </body> </html>
HTML的pre中换行
<html> <head> <title>在网页中输出文字</title> </head> <body> <pre> <script language="javascript" type="text/javascript"> <!-- document.write("使用write()方法"); document.write("产生的文字"); document.writeln("使用writeln()方法"); document.writeln("产生的文字"); --> </script> </pre> </body> </html>
另外，注意浏览器会把JavaScript和HTML代码混在一起进行解析，只有在当前文档正在解析时才可以使用write和writeln方法在网页中输出内容。如果不是同时解析的，write和writeln方法会先清除然后覆盖掉当前窗口的内容。
覆盖
<html> <head> <title>在网页中输出文字</title> <script language="javascript" type="text/javascript"> <!-- function outText() { var myStr = myForm.myText.value; document.write("使用write()方法输出的文字","<br>"); document.writeln("使用writeln()方法输出的文字","<br>"); document.write("您输入的文字为：",myStr); } --> </script> </head> <body> <form name="myForm"> 请输入文字：<input type="text" name="myText" value="刘智勇"> <input type="button" value="提交" onClick="outText()"> </form> </body> </html>
先清除了再覆盖
<html> <head> <title>在网页中输出文字</title> <script language="javascript" type="text/javascript"> <!-- function outText() { document.write("使用write()方法输出的文字","<br>"); document.writeln("使用writeln()方法输出的文字","<br>"); document.write("您输入的文字为：",myForm.myText.value); } --> </script> </head> <body> <form name="myForm"> 请输入文字：<input type="text" name="myText" value="刘智勇"> <input type="button" value="提交" onClick="outText()"> </form> </body> </html>
7.在其它文档中输出内容：open(),close()
注意write()和writeln()方法输出的内容是放在HTML源代码中再被解析的。
第一次调用write()和writeln()方法输出内容时，JavaScript会自动调用open()方法来打开文档流，但是close()方法则是必须的，不能省略，否则浏览器会一直显示“正在打开网页...”
没有调用close()
<html> <head> <title>框架页</title> </head> <body> <iframe height="150" width="350"></iframe><br> <script language="javascript" type="text/javascript"> <!-- window.frames[0].document.writeln("<html>"); window.frames[0].document.writeln("<body>"); window.frames[0].document.writeln("<font color=red>这是子窗口中的内容</font>"); window.frames[0].document.writeln("</body>"); window.frames[0].document.writeln("</html>"); --> </script> </body> </html>
调用了open()和close()
<html> <head> <title>框架页</title> </head> <body> <iframe height="150" width="350"></iframe><br> <script language="javascript" type="text/javascript"> <!-- window.frames[0].document.open(); window.frames[0].document.writeln("<html>"); window.frames[0].document.writeln("<body>"); window.frames[0].document.writeln("<font color=red>这是子窗口中的内容</font>"); window.frames[0].document.writeln("</body>"); window.frames[0].document.writeln("</html>"); window.frames[0].document.close(); --> </script> </body> </html>
8.输出非HTML文档：document.open(mimeType)
View Code
<html> <head> <title>输出非HTML文档</title> <script language="javascript" type="text/javascript"> <!-- function writeText(myWin) { myWin.document.writeln("<HTML>"); myWin.document.writeln("<HEAD>"); myWin.document.writeln("<TITLE>"); myWin.document.writeln("新开文档"); myWin.document.writeln("</TITLE>"); myWin.document.writeln("</HEAD>"); myWin.document.writeln("<BODY>"); myWin.document.writeln("<FONT COLOR='RED'>"); myWin.document.writeln("这是使用JavaScript创建的网页。"); myWin.document.writeln("</FONT>"); myWin.document.writeln("</BODY>") myWin.document.writeln("</HTML>"); } function outHTML() { var htmlWin = window.open("","myHTML","width=300,height=300,resizable=yes"); htmlWin.document.open("text/html"); writeText(htmlWin); } function outText() { var textWin = window.open("","myText","width=300,height=300,resizable=yes"); textWin.document.open("text/plain"); writeText(textWin); } --> </script> </head> <body> <input type="button" value="在新窗口中打开HTML文档" onClick="outHTML()"> <input type="button" value="在新窗口中打开TEXT文档" onClick="outText()"> </body> </html>
9.输出文档中所有的HTML元素：all属性
all属性返回一个数组all[]，包含了HTML文档中所有的HTML元素。
View Code
<html> <head> <title>输出HTML文件中的所有元素</title> </head> <body> <font color='red'>请完成以下表单：</font> <form name="myForm"> 姓名：<input type="text" name="myName"><br> 性别： <select name="mySex"> <option value="man">男</option> <option value="woman">女</option> </select><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- var elementLength = document.all.length; for (i=0;i<elementLength;i++) { document.write(document.all[i].tagName,"<br>"); } --> </script> </body> </html>
10.引用文档中的HTML元素
document.all[i]；
document.all[name]；
document.all.tags[tagName]。
View Code
<html> <head> <title>输出HTML文件中的所有元素</title> </head> <body> <font color='red'>请完成以下表单：</font> <form name="myForm"> 姓名：<input type="text" name="myName" value="刘智勇"><br> 性别： <select name="mySex"> <option value="man">男</option> <option value="woman">女</option> </select><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- document.write("HTML文档中的第一个标签为：<",document.all[0].tagName,"><br>"); document.write("文本框中的内容为：",document.all["myName"].value,"<br>"); var buttons = document.all.tags("input"); document.write("本例中input元素有",buttons.length,"个，其类型为别为：<br>"); for (i=0;i<buttons.length;i++) { document.write(buttons[i].type,"<br>"); } --> </script> </body> </html>
11.引用文档元素中的子元素：all属性，children属性
View Code
<html> <head> <title>输出HTML元素下的子元素</title> </head> <body> <font color='red'>请完成以下表单：</font> <form name="myForm" onSubmit="return showSelect()"> 姓名：<input type="text" name="myName" value="刘智勇"><br> 性别： <select name="mySex"> <option value="man">男</option> <option value="woman">女</option> </select><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- function showSelect() { //获取下拉列表框下的所有元素 var selects = document.all["mySex"].children; for (i=0;i<selects.length;i++) { //判断选项框是否被选择 if (selects[i].selected) { //输出已选择的选项框中的文字 document.write("您选择的性别为：",selects[i].text,"<br>"); break; } } return true; } --> </script> </body> </html>
View Code
<html> <head> <title>输出HTML文件中的所有元素</title> </head> <body> <font color='red'>请完成以下表单：</font> <form name="myForm"> 姓名：<input type="text" name="myName" value="刘智勇"><br> 性别： <select name="mySex"> <option value="man">男</option> <option value="woman">女</option> </select><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script language="javascript" type="text/javascript"> <!-- //用于递归调用的函数，可以输出所有HTML元素 function showTag(htmlLElement,layerCount) { //当前元素的所有子元素 var childElement = htmlLElement.children; //当前元素的子元素个数 var childElementLenght = childElement.length; //用于控制版式的变量 layerCount++; //通过循环输出当前元素的所有子元素 for (var i=0;i<childElementLenght;i++) { //版式控制 for(var j=0;j<layerCount;j++) { document.write(" "); } //输出当前元素的子元素名称 document.write(childElement[i].tagName,"<br>"); //递归调用 showTag(childElement[i],layerCount); } } //输出HTML文档中的第一个元素 document.write(document.all[0].tagName,"<br>"); //开始调用递归函数 showTag(document.all[0],0); --> </script> </body> </html>
12.其它文档信息：charset，defaultCharset，readyState属性。
View Code
<html> <head> <title>其他文档信息</title> <!--使用以下语句设置文档采用的字符集--> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script language="javascript" type="text/javascript"> <!-- document.write("文档采用的字符集为：",document.charset,"<br>"); document.write("文档采用的默认字符集为：",document.defaultCharset,"<br>"); var nowState = setInterval("setState()",100); function setState() { state = document.readyState; switch (state) { case "uninitialized": document.title = "还没有开始加载文档"; break; case "loading": document.title = "文档加载中……"; break; case "interactive": document.title = "加载的文档已经可以和用户进行交互了"; break; case "complete": document.title = "文档加载完毕"; clearInterval(nowState); break; } } --> </script> </head> <body> <!--这是一张不存在的图片，作用是延迟加载网页的完成时间--> <img src="http://www.aspxfans.cs/test.gif"> </body> </html>
图像对象：
图像对象的数组，属性，事件：……。
图像对象的访问：document.images[i];document.images [imageName];document.imageName。
显示图片信息
<html> <head> <title>显示图片信息</title> </head> <body> 本例可以显示图片的信息：<br> <img src="img/flower.jpg" border="2" hspace="10" vspace="30" name="myImg" lowsrc="lowflower.jpg" align="left"> 这是一张由笔者自己拍的照片<br><br> <script language="javascript" type="text/javascript"> <!-- document.write("图片的属性如下所示：<br>"); document.write("图片名称为：",document.images[0].name,"<br>"); document.write("图片的宽度为：",document.images[0].width,"<br>"); document.write("图片的高度为：",document.images[0].height,"<br>"); document.write("图片的边框为：",document.images[0].border,"<br>"); document.write("图片与文字水平方向的间距为：",document.images[0].hspace,"<br>"); document.write("图片与文字垂直方向的间距为：",document.images[0].vspace,"<br>"); document.write("图片的URL为：",document.images[0].src,"<br>"); document.write("该图片的低质量图片为：",document.images[0].lowsrc,"<br>"); --> </script> </body> </html>
置换图片
<html> <head> <title>置换图片</title> <script language="javascript" type="text/javascript"> <!-- function changeImg(imgName) { document.images[imgName].src="img/article2.gif"; } function resetImg(imgName) { document.images[imgName].src="img/article1.gif"; } --> </script> </head> <body> <img src="img/article1.gif" name="img1"> <a href="#" onMouseOver="changeImg('img1')" onMouseOut="resetImg('img1')">第1章 JavaScript基础</a><br> <img src="img/article1.gif" name="img2"> <a href="#" onMouseOver="changeImg('img2')" onMouseOut="resetImg('img2')">第2章 常量、变量与数据类型</a><br> <img src="img/article1.gif" name="img3"> <a href="#" onMouseOver="changeImg('img3')" onMouseOut="resetImg('img3')">第3章 表达式与运算符</a><br> </body> </html>
随机图片
<html> <head> <title>随机图片</title> <script language="javascript" type="text/javascript"> <!-- function changeImg() { //设置随机数 var ran = Math.random(); //由于random()方法产生的是0到1之间的随机数，所以将其乘以10，后再取整，就可以得到0到10之间的数 ram = Math.round(ran*10); //将图片地址存在数组中 var arr = new Array(); arr[0] = "img/img01.jpg"; arr[1] = "img/img02.jpg"; arr[2] = "img/img03.jpg"; arr[3] = "img/img04.jpg"; arr[4] = "img/img05.jpg"; arr[5] = "img/img06.jpg"; arr[6] = "img/img07.jpg"; arr[7] = "img/img08.jpg"; arr[8] = "img/img09.jpg"; arr[9] = "img/img10.jpg"; arr[10] = "img/flower.jpg"; document.images[0].src = arr[ram]; } setInterval("changeImg()",1000); --> </script> </head> <body> <img src="img/flower.jpg"> </body> </html>
按钮改变图片大小
<html> <head> <title>改变图片大小</title> <script language="javascript" type="text/javascript"> <!-- //将图片缩小10% function changeImg1() { document.images[0].width = document.images[0].width * 0.9; document.images[0].height = document.images[0].height * 0.9; } //将图片扩大10% function changeImg2() { document.images[0].width = document.images[0].width * 1.1; document.images[0].height = document.images[0].height * 1.1; } --> </script> </head> <body> <input type="button" value="-" onClick="changeImg1()"> <input type="button" value="+" onClick="changeImg2()"><br> <img src="img/flower.jpg"> </body> </html>
鼠标轴改变图片大小
<html> <head> <title>改变图片大小</title> <script language="javascript" type="text/javascript"> <!-- //将图片缩小10% function changeImg1() { document.images[0].width = document.images[0].width * 0.9; document.images[0].height = document.images[0].height * 0.9; } //将图片扩大10% function changeImg2() { document.images[0].width = document.images[0].width * 1.1; document.images[0].height = document.images[0].height * 1.1; } function changeImg() { //滚动鼠标中轴的方向，event.wheelDelta大于零为向上滚动鼠标中轴 if (event.wheelDelta>0) { changeImg2(); } else { changeImg1(); } } --> </script> </head> <body> <input type="button" value="-" onClick="changeImg1()"> <input type="button" value="+" onClick="changeImg2()"><br> <img src="img/flower.jpg" onmousewheel="changeImg()"> </body> </html>
缓存图片
<html> <head> <title>随机图片</title> <script language="javascript" type="text/javascript"> <!-- function changeImg() { //设置随机数 var ran = Math.random(); //由于random()方法产生的是0到1之间的随机数，所以将其乘以10，后再取整，就可以得到0到10之间的数 ram = Math.round(ran*10); //将图片存在数组中 var arr = new Array(); //通过循环，设置数组中的元素为一个图片对象 //注意与sample23.htm中的数组不同，sample23.htm中的arr[]数组存放的是图片的地址，而不是图片对象 for (i=0;i<11;i++) { arr[i] = new Image(); } //设置图片对象的src属性 arr[0].src = "img/img01.jpg"; arr[1].src = "img/img02.jpg"; arr[2].src = "img/img03.jpg"; arr[3].src = "img/img04.jpg"; arr[4].src = "img/img05.jpg"; arr[5].src = "img/img06.jpg"; arr[6].src = "img/img07.jpg"; arr[7].src = "img/img08.jpg"; arr[8].src = "img/img09.jpg"; arr[9].src = "img/img10.jpg"; arr[10].src = "img/flower.jpg"; //设置图片的地址为数组元素（即图片对象）的src属性值 //注意此处与sample23.htm中的不同，sample23.htm中此设设置的是arr[ram]，而不是arr[ram].src document.images[0].src = arr[ram].src; } setInterval("changeImg()",1000); --> </script> </head> <body> <img src="img/flower.jpg"> </body> </html>
load事件
<html> <head> <title>随机图片</title> </head> <body> <img src="img/flower.jpg"><br> 图片：<input type="text" name="showImgCount" size="60"> <script language="javascript" type="text/javascript"> <!-- //设置计数器，查看是否所有的图片都已经加载完毕 var imgCount = 0; //创建数组，将图片存在数组中 var arr = new Array(); //通过循环，设置数组中的元素为一个图片对象，并设置图片的load事件 for (i=0;i<11;i++) { arr[i] = new Image(); //当一个图片加载完毕后检查是否所以图片都加载完毕，如果是的话，开始随机显示图片 arr[i].onload = imgOK; } //设置图片对象的src属性 arr[0].src = "img/img01.jpg"; arr[1].src = "img/img02.jpg"; arr[2].src = "img/img03.jpg"; arr[3].src = "img/img04.jpg"; arr[4].src = "img/img05.jpg"; arr[5].src = "img/img06.jpg"; arr[6].src = "img/img07.jpg"; arr[7].src = "img/img08.jpg"; arr[8].src = "img/img09.jpg"; arr[9].src = "img/img10.jpg"; arr[10].src = "img/img11.jpg"; //用于判断图片是否缓存完毕的函数 function imgOK() { //计数器自加1 imgCount++; showImgCount.value = "正在加载第 " + imgCount + " 张图片"; //如果已经缓存完毕的图片数等于数组元素个数，则开始随机显示图片 if (imgCount==arr.length) { setInterval("showImg()",1000); } } function showImg() { //设置随机数 var ran = Math.random(); ram = Math.round(ran*10); //显示一个随机图片 document.images[0].src = arr[ram].src; document.images[0].width = arr[ram].width * 0.15; document.images[0].height = arr[ram].height * 0.15; showImgCount.value = arr[ram].src; } --> </script> </body> </html>
加载默认图片
<html> <head> <title>显示默认图片</title> <script language="javascript" type="text/javascript"> <!-- function showDefualtImg(img) { img.src = "img/err.gif" } --> </script> </head> <body> <!--以下三张图片都是不存在的图片--> <img src="img/1.jpg" onerror="showDefualtImg(this)"><br> <img src="img/2.jpg" onerror="showDefualtImg(this)"><br> <img src="img/3.jpg" onerror="showDefualtImg(this)"><br> </body> </html>
链接对象：
链接对象数组，属性，事件：……。
查看网页上所有超链接
<html> <head> <title>网页上的所有超链接</title> </head> <body> <a href="sample01.htm">sample01.htm</a><br> <a href="sample02.htm">sample02.htm</a><br> <a href="sample03.htm">sample03.htm</a><br> <a href="sample04.htm">sample04.htm</a><br> <a href="sample05.htm">sample05.htm</a><br> <script language="javascript" type="text/javascript"> <!-- document.write("本页中所包含的超链接有：<br>"); for(i=0;i<document.links.length;i++) { document.write(document.links[i].href,"<br>"); document.links[i].target = "_blank"; } --> </script> </body> </html>
翻页功能
<html> <head> <title>翻页</title> </head> <body> <!--iframe用于网页链接--> <iframe src="sample30_1.htm" width="400" height="300" name="sampleWin"></iframe><br> <a href="#" onClick="return pageChange('up')" target="sampleWin">上一个范例</a> <a href="#" target="sampleWin"></a> <a href="#" onClick="return pageChange('down')" target="sampleWin">下一个范例</a> <br> <script language="javascript" type="text/javascript"> <!-- //当前页计数（可翻页页数为1~9，所以当前页计数也为1~9） var sample = 1; //初始化信息 changeText(1); //翻页控制 function pageChange(changeType) { //向下翻页 if (changeType=="down") { //当前页计数自加1 sample++; //最大当前页不能大于9，如果大于9则重设为9. if (sample==10) { sample = 9; alert("已经是最后一页了"); return false; } else { //如果计数器还在1~9范围之内，则设置links属性。 changeText(sample); } } else if (changeType=="up") //向上翻页 { //当前页计数自减1 sample--; //最大当前页不能小于1，如果小于1则重设为1 if (sample==0) { sample = 1; alert("已经是第一页了"); return false; } else { //如果计数器还在1~9范围之内，则设置links属性。 changeText(sample); } } } //设置links属性 function changeText(page) { //设置链接的URL for (var i=0;i<document.links.length;i++) { document.links[i].href="sample30_" + page + ".htm"; } //设置第2个链接的文本，以下设置在IE中有效 document.links[1].innerText = "当前网页为：sample30_" + page + ".htm"; } --> </script> </body> </html> // <html> <head> <title></title> </head> <body> 第1个网页 </body> </html>
网站目录
<html> <head> <title>网站目录</title> <script language="javascript" type="text/javascript"> <!-- //打开网页，并查看该网页中的links[] function openPage(pageURL) { //新开窗口打开网页 var indexWin = window.open(pageURL); //查看新窗口中的超链接个数 var linkLength = indexWin.document.links.length; //通过循环输出当前新开窗口中的所有超链接的URL for (var i=0;i<linkLength;i++) { document.write(indexWin.document.links[i].href,"<br>"); //递归调用 openPage(indexWin.document.links[i].href); } //关闭新开窗口 indexWin.close(); } --> </script> </head> <body> <a href="#" onClick="openPage('sample31_index.htm')">网站首页</a> </body> </html>
锚对象：
Document对象的anchors属性可以返回一个数组，该数组中的每一个元素都是一个Anchors对象，也称为锚对象。
只有在<a>标签中设置name属性，才可以创建一个锚。
在加载HTML文档时，JavaScript会自动创建一个anchors[]数组，数组中的元素个数由HTML文档中锚个数决定。JavaScript会将一个锚都以Anchors对象的形式保存在anchors[]数组中，anchors[]数组中的每一个元素所代表的就是HTML文档中的一个锚。引用方法：document.anchors[i]。
链接对象和锚对象都是由<a>标签创建的，但是创建Link对象<a>标签中必须要有href属性，创建Anchor对象<a>标签必须有name属性。
View Code
<html> <head> <title>锚对象与链接对象的区别</title> </head> <body> <a name="index">JavaScript课程介绍</a><br> <a href="sample31_1.htm" name="mylink1">基础篇</a><br> <a href="sample31_2.htm" name="mylink2">实用篇</a><br> <a href="sample31_3.htm">Ajax篇</a><br><br> <script language="javascript" type="text/javascript"> <!-- //循环输出所有Link对象 var linkLenght = document.links.length; document.write("本例中的超链接一共有",linkLenght,"个<br>这些超链接分别为：<br>"); for(var i=0;i<linkLenght;i++) { if (document.links[i].text!=undefined) { document.write(document.links[i].text,"：") } else if (document.links[i].innerText!=undefined) { document.write(document.links[i].innerText,"：") } document.write(document.links[i].href,"<br>"); } //循环输出所有Anchor对象 var anchorsLenght = document.anchors.length; document.write("<br>本例中的锚一共有",anchorsLenght,"个<br>这些超链接分别为：<br>"); for(var i=0;i<anchorsLenght;i++) { if (document.anchors[i].text!=undefined) { document.write(document.anchors[i].text,"：") } else if (document.anchors[i].innerText!=undefined) { document.write(document.anchors[i].innerText,"：") } document.write(document.anchors[i].name,"<br>"); } --> </script> </body> </html>
锚通常在一个内容比较多的网页中使用。当网页内容比较多的时候可以在网页不同位置设置不同的锚，通过对锚的引用让用户直接跳转到锚所在的位置。使用Anchor对象可以很方便地在一个网页上创建文档索引。
View Code
<html> <head> <title>文档索引</title> </head> <body> <div id="partIndex"></div> <a name="part1">第1章 JavaScript基础</a><br><br> 1.1 脚本语言的介绍<br><br> 1.2 JavaScript的作用<br><br> 1.3 JavaScript的版本与支持<br><br> 1.4 面向对象的语言<br><br> 1.5 JavaScript编辑器<br><br> 1.6 在网页中加入JavaScript<br><br> 1.7 <script>标记介绍<br><br> 1.8 包括外部的JavaScript文件<br><br> 1.9 JavaScript的作用<br><br> 1.10 注意事项<br><br> <br><br> <a name="part2">第2章 常量、变量与数据类型</a><br><br> 2.1 常量<br><br> 2.2 变量<br><br> 2.3 基本数据类型<br><br> 2.4 复合数据类型<br><br> 2.5 其他数据类型<br><br> 2.6 数据类型的转换<br><br> <br><br> <a name="part3">第3章 表达式与运算符</a><br><br> 3.1 表达式<br><br> 3.2 操作数<br><br> 3.3 运算符介绍<br><br> 3.4 算术运算符<br><br> 3.5 比较运算符<br><br> 3.6 字符串运算符<br><br> 3.7 赋值运算符<br><br> 3.8 逻辑运算符<br><br> 3.9 位运算符<br><br> 3.10 其他运算符<br><br> <br><br> <a name="part4">第4章 流程控制语句</a><br><br> 4.1 表达式语句<br><br> 4.2 语句块<br><br> 4.3 选择语句<br><br> 4.4 循环语句<br><br> 4.5 跳转语句<br><br> 4.6 异常处理语句<br><br> 4.7 其他语句 <script language="javascript" type="text/javascript"> <!-- //准备字符串，用于存放超链接 var partIndexStr = ""; for (i=0;i<document.anchors.length;i++) { //创建超链接 partIndexStr += "<a href='#" + document.anchors[i].name + "'>" + document.anchors[i].innerText + "</a></br>" } partIndexStr += "<br>"; //将超链接显示在<div>与</div>之间 partIndex.innerHTML = partIndexStr; --> </script> </body> </html>
--------------------------------------------------------------------------------
本文部分引用自《JavaScript网页开发技术》西安电子科技大学出版社。 《零基础学Javascript》
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步