|
http://www.w3schools.com">Visit W3Schools</a>
<form>
<input type="button" onclick="myTarget()" value="Make the link open in a new window!">
</form>
<p>Try the link before and after you have pressed the button!</p>
</body>
</html>
使连接获得焦点和失去焦点
<html>
<head>
<style type="text/css">
a:active {color:blue}
</style>
<script type="text/javascript">
function getfocus()
{
document.getElementById('w3s').focus()
}
function losefocus()
{
document.getElementById('w3s').blur()
}
</script>
</head>
<body>
<a id="w3s" href="Visit'>http://www.w3schools.com">Visit W3Schools.com</a>
<form>
<input type="button" onclick="getfocus()" value="Get Focus">
<input type="button" onclick="losefocus()" value="Lose Focus">
</form>
</body>
</html>
连接打开的方式
<html>
<body>
<script type="text/javascript">
function linkToAnchor(num)
{
var win2=open("tryjs_anchor2.htm","secondLinkWindow","scrollbars=yes,width=250,height=200")
win2.location.hash=num
}
</script>
<h3>Links and Anchors</h3>
<p>Click on a button to display that anchor in window 2!</p>
<form>
<input type="button" value="0" onClick="linkToAnchor(this.value)">
<input type="button" value="1" onClick="linkToAnchor(this.value)">
<input type="button" value="2" onClick="linkToAnchor(this.value)">
<input type="button" value="3" onClick="linkToAnchor(this.value)">
</form>
</body>
</html>
按钮对象
创建一个按钮
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("Hello World!")
document.all("myButton").focus()
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" name="myButton" onClick="show_alert()" />
</form>
</body>
</html>
显示按钮的名称
<html>
<body>
<form name="myForm">
The form's name is: <input type="text" name="text1" size="20">
<br /><br />
<input type="button" value="Show the form's name" onClick="this.form.text1.value=this.form.name">
</form>
</body>
</html>
显示表单中各个项的名称
<html>
<head>
<script type="text/javascript">
function showFormElements(theForm)
{
str="Form Elements: "
for (i=0; i<theForm.length; i++)
str+=" \n " + theForm.elements[i].name
alert(str)
}
</script>
</head>
<body>
<form>
First name: <input type="text" name="fname" size="20">
<br />
Last name: <input type="text" name="lname" size="20">
<br /><br />
<input type="button" name="button1"
value="Display name of form elements"
onClick="showFormElements(this.form)">
</form>
</body>
</html>
副选框的选择和取消
<html>
<head>
<script type="text/javascript">
function check()
{
var x=document.forms.myForm
x[0].checked=true
}
function uncheck()
{
var x=document.forms.myForm
x[0].checked=false
}
</script>
</head>
<body>
<form name="myForm">
<input type="checkbox" value="on">
<input type="button" onclick="check()" value="Check Checkbox">
<input type="button" onclick="uncheck()" value="Uncheck Checkbox">
</form>
</body>
</html>
表单中的副选框的选择与取消
<html>
<head>
<script type="text/javascript">
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
answer.value="You ordered a coffee with " + txt
}
</script>
</head>
<body>
<form>
How would you like your coffee?<br /><br />
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
<br />
<input type="button" name="test" onclick="check()" value="Send order">
<br /><br />
<input type="text" name="answer" size="50">
</form>
</body>
</html>
副选框实现的功能(转换为大写)
<html>
<body>
<script type="text/javascript">
function convertField(field)
{
if (document.form1.convertUpper.checked)
{
field.value=field.value.toUpperCase()
}
}
function convertAllFields()
{
document.form1.fname.value=document.form1.fname.value.toUpperCase()
document.form1.lname.value=document.form1.lname.value.toUpperCase()
}
</script>
<form name="form1">
First name:
<input type="text" name="fname" onChange="convertField(this)" size="20" />
<br />
Last name:
<input type="text" name="lname" onChange="convertField(this)" size="20" />
<br />
Convert fields to upper case
<input type="checkBox" name="convertUpper" onClick="if (this.checked) {convertAllFields()}" value="ON">
</form>
</body>
</html>
文档对象
显示连接的数量
<html>
<body>
<a name="A">First anchor</a><br />
<a name="B">Second anchor</a><br />
<a name="C">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
</body>
</html>
显示当前所在服务器的地址
<html>
<body>
The domain name for this site is:
<script type="text/javascript">
document.write(document.domain)
</script>
</body>
</html>
显示当前页面的地址：
<html>
<body>
<p>The referrer of a document is the URL of the document that linked to a document.</p>
The referrer of this document is:
<script type="text/javascript">
document.write(document.referrer)
</script>
<p>In this case it is a frame page that is linking to this document. IE returns the URL of the frame page and Netscape returns the URL of the document linking to this document.</p>
</body>
</html>
显示当前文档的标题
<html>
<head>
<title>MY TITLE</title>
</head>
<body>
The title of the document is:
<script type="text/javascript">
document.write(document.title)
</script>
</body>
</html>
用按钮来显示当前页面的地址
<html>
<head>
<script type="text/javascript">
function showURL()
{
alert(document.URL)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="showURL()" value="Show URL">
</form>
</body>
</html>
通过单击可以知道当前的标签
<html>
<head>
<script type="text/javascript">
function getElement()
{
var x=document.getElementById("myHeader")
alert("I am a " + x.tagName + " element")
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1>
</body>
</html>
显示表单中元素的个数
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
</script>
</head>
<body>
<form >
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<br />
<input name="mybutton" type="button" onclick="getElements()" value="Show how many elements named 'myInput'">
</form>
</body>
</html>
打开一个新的文档，显示几个文字
<html>
<head>
<script type="text/javascript">
function docOpen()
{
document.open()
document.write("<h3>Hello World!</h3>")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="docOpen()" value="Open a new document">
</form>
</body>
</html>
打开一个新的文档，并显示新的文档
<html>
<head>
<script>
function replace()
{
var newDoc=document.open("text/html","replace")
var txt="<html><body>FUN!!!!</body></html>"
newDoc.write(txt)
newDoc.close()
}
</script>
</head>
<body>
<h1>Learning how to access the DOM is....</h1><br />
<Input type ="button" value = "Finish Sentence" onclick="replace()">
</body>
</html>
计算表单的个数
<html>
<body>
<form name="Form1">
Name: <input type="text" size="20">
</form>
<form name="Form2">
Age: <input type="text" size="3">
</form>
<script type="text/javascript">
txt="This document contains: " + document.forms.length + " forms."
document.write( 上一页 [1] [2] [3] [4] [5] [6] [7] 下一页
[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(3) [网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(2)
[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(1) [网页制作]Ultradev实例教程:4 插件的安装与使用
[网页制作]Ultradev实例教程:3.7 创建一个简单的查询 [网页制作]Ultradev实例教程:3.6 删除纪录
[网页制作]Ultradev实例教程:3.5 编辑数据库中的纪录 [网页制作]Ultradev实例教程:3.4 向数据库添加纪录
[网页制作]Ultradev实例教程:3.3 应用数据库创建动态网页 [网页制作]Ultradev实例教程:3.2 创建数据库连接
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
