1.<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称:"+ browser)
document.write("
")
document.write("浏览器版本:"+ version)
<script type="text/javascript">
document.write("<p>浏览器:")
document.write(navigator.appName + "</p>")
document.write("<p>浏览器版本:")
document.write(navigator.appVersion + "</p>")
document.write("<p>代码:")
document.write(navigator.appCodeName + "</p>")
document.write("<p>平台:")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies 启用:")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>浏览器的用户代理报头:")
document.write(navigator.userAgent + "</p>")
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("
");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("
");
document.write("Name=" + x.appName);
document.write("
");
document.write("Version=" + x.appVersion);
document.write("
");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("
");
document.write("CPUClass=" + x.cpuClass);
document.write("
");
document.write("OnLine=" + x.onLine);
document.write("
");
document.write("Platform=" + x.platform);
document.write("
");
document.write("UA=" + x.userAgent);
document.write("
");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("
");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("
");
document.write("UserLanguage=" + x.userLanguage);
</script>
</body>
</html>
2.
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了!")}
else
{alert("是时候升级您的浏览器了!")}
}
</script>
</head>
<body οnlοad="detectBrowser()">
</body>
</html>
3.
创建cookie:
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
4.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("您点击了鼠标右键!")
}
else
{
alert("您点击了鼠标左键!")
}
}
</script>
</head>
<body οnmοusedοwn="whichButton(event)">
<p>请在文档中点击。一个消息框会提示出你点击了哪个鼠标按键。</p>
</body>
</html>
5.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body οnkeyup="whichButton(event)">
<p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>
6.<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>
</body>
</html>
7
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body οnmοusedοwn="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
8.
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body οnmοusedοwn="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
9.
<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body οnmοusedοwn="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
10
<form>
Select text: <input type="text" value="Hello world!"
οnselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
οnselect="alert('You have selected some of the text.')">
Hello world!
11.
<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
οnfοcus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
οnfοcus="setStyle(this.id)" id="lname" />
</body>
</html>
12.不让输入数字的文本框。
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onKeyDown="return noNumbers(event)" />
</form>
</html>
13.
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.altKey==1)
{
alert("The ALT key was pressed!")
}
else
{
alert("The ALT key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the ALT key or not.</p>
</body>
</html>
14
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.ctrlKey==1)
{
alert("The CTRL key was pressed!")
}
else
{
alert("The CTRL key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.</p>
</body>
</html>
15
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href=" http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>
<body>
<a id="myAnchor" href=" http://www.microsoft.com">访问 Microsoft</a>
<input type="button" onClick="changeLink()" value="改变链接">
<p>在本例中,我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self",这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank",链接将在新窗口中打开。</p>
</body>
</html>
16 Checkbox - 把文本转换为大写
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
名:<input type="text" id="fname" size="20" />
<br /><br />
姓:<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onClick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
17
使用单选按钮中的 value 属性
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser
}
</script>
</head>
<body>
<p>您喜欢哪款浏览器?</p>
<form>
<input type="radio" name="browser" onClick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是:<input type="text" id="answer" size="20">
</form>
</body>
</html>
18
重置表单
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本,然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名:<input type="text" size="20"><br />
年龄:<input type="text" size="20"><br />
<br />
<input type="button" onClick="formReset()" value="重置">
</form>
</body>
</html>
19验证表单
<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
{
alert("名字必须小于 10 个字符。")
submitOK="false"
}
if (isNaN(age)||age<1||age>100)
{
alert("年龄必须是 1 与 100 之间的数字。")
submitOK="false"
}
if (at==-1)
{
alert("不是有效的电子邮件地址。")
submitOK="false"
}
if (submitOK=="false")
{
return false
}
}
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onSubmit="return validate()">
名字(最多 10 个字符):<input type="text" id="fname" size="20"><br />
年龄(从 1 到 100):<input type="text" id="age" size="20"><br />
电子邮件:<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交">
</form>
</body>
</html>
20 选取文本域中的内容
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧!">
<input type="button" value="选择文本" onClick="selText()">
</form>
</body>
</html>
21. 表单中的下拉列表
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器:
<select id="myList" onChange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是:<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
22.
另一个下拉列表
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=txt + option
document.getElementById("result").value=txt
}
</script>
</head>
<body>
<form>
请选择数字:<br />
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onClick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
</body>
23 当达到文本域的最大字符数时跳至下一个域
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框:</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onKeyUp="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onKeyUp="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onKeyUp="checkLen(this,this.value)">
</form>
</body>
</html>
23.重新加载文档
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="重新加载页面" onClick="reloadPage()" />
</body>
</html>
24.禁用并启用下拉列表
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true
}
function enable()
{
document.getElementById("mySelect").disabled=false
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onClick="disable()" value="禁用列表">
<input type="button" onClick="enable()" value="启用列表">
</form>
</body>
</html>
25 更改下拉列表中的可见行数
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("mySelect").size=4
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="changeSize()" value="改变大小">
</form>
</body>
</html>
26 选择下拉列表中的多个选项
<html>
<head>
<script type="text/javascript">
function selectMultiple()
{
document.getElementById("mySelect").multiple=true
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="selectMultiple()" value="选择多个">
</form>
<p>在您点击 “选择多个” 按钮之前,请尝试同时选取多个选项。在点击 “选择多个” 按钮之后,请再试一次。</p>
</body>
</html>
27 取得下拉列表中所选的选项的索引位置
<html>
<head>
<script type="text/javascript">
function alertIndex()
{
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementsByTagName("option");
alert(y[x].text + " has the index of: " + y[x].index);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果:
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br />
<br />
<input type="button" onClick="alertIndex()" value="显示被选水果的 index">
</form>
</body>
28.从下拉列表中删除选项
<html>
<head>
<script type="text/javascript">
function removeOption()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>
29规定表格的内部边线
<html>
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="rowRules()" value="仅显示行边框">
<input type="button" onClick="colRules()" value="仅显示列边框">
</body>
</html>
30为表格创建了一个标题
<html>
<head>
<script type="text/javascript">
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="我的表格标题"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="createCaption()" value="创建标题">
</body>
</html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称:"+ browser)
document.write("
")
document.write("浏览器版本:"+ version)
<script type="text/javascript">
document.write("<p>浏览器:")
document.write(navigator.appName + "</p>")
document.write("<p>浏览器版本:")
document.write(navigator.appVersion + "</p>")
document.write("<p>代码:")
document.write(navigator.appCodeName + "</p>")
document.write("<p>平台:")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies 启用:")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>浏览器的用户代理报头:")
document.write(navigator.userAgent + "</p>")
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("
");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("
");
document.write("Name=" + x.appName);
document.write("
");
document.write("Version=" + x.appVersion);
document.write("
");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("
");
document.write("CPUClass=" + x.cpuClass);
document.write("
");
document.write("OnLine=" + x.onLine);
document.write("
");
document.write("Platform=" + x.platform);
document.write("
");
document.write("UA=" + x.userAgent);
document.write("
");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("
");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("
");
document.write("UserLanguage=" + x.userLanguage);
</script>
</body>
</html>
2.
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了!")}
else
{alert("是时候升级您的浏览器了!")}
}
</script>
</head>
<body οnlοad="detectBrowser()">
</body>
</html>
3.
创建cookie:
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
4.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("您点击了鼠标右键!")
}
else
{
alert("您点击了鼠标左键!")
}
}
</script>
</head>
<body οnmοusedοwn="whichButton(event)">
<p>请在文档中点击。一个消息框会提示出你点击了哪个鼠标按键。</p>
</body>
</html>
5.
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body οnkeyup="whichButton(event)">
<p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>
6.<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>
</body>
</html>
7
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body οnmοusedοwn="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
8.
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body οnmοusedοwn="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
9.
<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body οnmοusedοwn="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
10
<form>
Select text: <input type="text" value="Hello world!"
οnselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
οnselect="alert('You have selected some of the text.')">
Hello world!
11.
<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
οnfοcus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
οnfοcus="setStyle(this.id)" id="lname" />
</body>
</html>
12.不让输入数字的文本框。
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onKeyDown="return noNumbers(event)" />
</form>
</html>
13.
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.altKey==1)
{
alert("The ALT key was pressed!")
}
else
{
alert("The ALT key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the ALT key or not.</p>
</body>
</html>
14
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.ctrlKey==1)
{
alert("The CTRL key was pressed!")
}
else
{
alert("The CTRL key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.</p>
</body>
</html>
15
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href=" http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>
<body>
<a id="myAnchor" href=" http://www.microsoft.com">访问 Microsoft</a>
<input type="button" onClick="changeLink()" value="改变链接">
<p>在本例中,我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self",这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank",链接将在新窗口中打开。</p>
</body>
</html>
16 Checkbox - 把文本转换为大写
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
名:<input type="text" id="fname" size="20" />
<br /><br />
姓:<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onClick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
17
使用单选按钮中的 value 属性
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser
}
</script>
</head>
<body>
<p>您喜欢哪款浏览器?</p>
<form>
<input type="radio" name="browser" onClick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onClick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是:<input type="text" id="answer" size="20">
</form>
</body>
</html>
18
重置表单
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本,然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名:<input type="text" size="20"><br />
年龄:<input type="text" size="20"><br />
<br />
<input type="button" onClick="formReset()" value="重置">
</form>
</body>
</html>
19验证表单
<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
{
alert("名字必须小于 10 个字符。")
submitOK="false"
}
if (isNaN(age)||age<1||age>100)
{
alert("年龄必须是 1 与 100 之间的数字。")
submitOK="false"
}
if (at==-1)
{
alert("不是有效的电子邮件地址。")
submitOK="false"
}
if (submitOK=="false")
{
return false
}
}
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onSubmit="return validate()">
名字(最多 10 个字符):<input type="text" id="fname" size="20"><br />
年龄(从 1 到 100):<input type="text" id="age" size="20"><br />
电子邮件:<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交">
</form>
</body>
</html>
20 选取文本域中的内容
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧!">
<input type="button" value="选择文本" onClick="selText()">
</form>
</body>
</html>
21. 表单中的下拉列表
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器:
<select id="myList" onChange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是:<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
22.
另一个下拉列表
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=txt + option
document.getElementById("result").value=txt
}
</script>
</head>
<body>
<form>
请选择数字:<br />
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onClick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
</body>
23 当达到文本域的最大字符数时跳至下一个域
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框:</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onKeyUp="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onKeyUp="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onKeyUp="checkLen(this,this.value)">
</form>
</body>
</html>
23.重新加载文档
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="重新加载页面" onClick="reloadPage()" />
</body>
</html>
24.禁用并启用下拉列表
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true
}
function enable()
{
document.getElementById("mySelect").disabled=false
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onClick="disable()" value="禁用列表">
<input type="button" onClick="enable()" value="启用列表">
</form>
</body>
</html>
25 更改下拉列表中的可见行数
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("mySelect").size=4
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="changeSize()" value="改变大小">
</form>
</body>
</html>
26 选择下拉列表中的多个选项
<html>
<head>
<script type="text/javascript">
function selectMultiple()
{
document.getElementById("mySelect").multiple=true
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="selectMultiple()" value="选择多个">
</form>
<p>在您点击 “选择多个” 按钮之前,请尝试同时选取多个选项。在点击 “选择多个” 按钮之后,请再试一次。</p>
</body>
</html>
27 取得下拉列表中所选的选项的索引位置
<html>
<head>
<script type="text/javascript">
function alertIndex()
{
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementsByTagName("option");
alert(y[x].text + " has the index of: " + y[x].index);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果:
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br />
<br />
<input type="button" onClick="alertIndex()" value="显示被选水果的 index">
</form>
</body>
28.从下拉列表中删除选项
<html>
<head>
<script type="text/javascript">
function removeOption()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onClick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>
29规定表格的内部边线
<html>
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="rowRules()" value="仅显示行边框">
<input type="button" onClick="colRules()" value="仅显示列边框">
</body>
</html>
30为表格创建了一个标题
<html>
<head>
<script type="text/javascript">
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="我的表格标题"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onClick="createCaption()" value="创建标题">
</body>
</html>