菜鸟学习javascript实例教程


用JS显示文字的例子:

 

<html>
<body>

 

<script type="text/javascript">
document.write("Hello World!")
</script>

 

</body>
</html>

 

用HTML标签来格式化文本的例子:

 

<html>
<body>

 

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

 

</body>
</html>

 

书写JS位置的例子:

 

打开页面弹出窗口的例子

 

<html>
<head>
<script type="text/javascript">
function message()
{
alert("网页教学网欢迎你的光临")
}
</script>
</head>

 

<body onload="message()">

 

</body>
</html>

 


在BODY区内输出显示文本的例子:

 

<html>
<head>
</head>

 

<body>

 

<script type="text/javascript">
document.write("欢迎光临网页教学网http://www.webjx.com")
</script>

 

</body>
</html>

 


调用其它的一个JS文件的例子:

 

<html>
<head>
</head>
<body>

 

<script src="xxx.js">
</script>

 

<p>
The actual script is in an external script file called "xxx.js".
</p>

 

</body>
</html>

 


变量的使用

 


变量使用的例子:

 


<html>
<body>

 

<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>

 

<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>

 

<p>Then the variable is displayed one more time, only this time as a heading.</p>

 

</body>
</html>

 


函数的例子

 

函数使用的一个例子:

 

<html>
<head>

 

<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>

 

</head>
<body>

 

<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>

 

<p>By pressing the button, a function will be called. The function will alert a message.</p>

 

</body>
</html>

 

带一个参数的函数的例子:

 

<html>
<head>

 

<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>

 

</head>
<body>

 

<form>
<input type="button"
onclick="myfunction('Hello')"
value="Call function">
</form>

 


<p>By pressing the button, a function with an argument will be called. The function will alert
this argument.</p>

 

</body>
</html>

 

不同的两个参数调用函数的例子:

 

<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>

 

<body>
<form>
<input type="button"
onclick="myfunction('Good Morning!')"
value="In the Morning">

 

<input type="button"
onclick="myfunction('Good Evening!')"
value="In the Evening">
</form>

 

<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>

 

</body>
</html>

 

利用函数返回值的例子:

 

<html>
<head>

 

<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>

 

</head>
<body>

 

<script type="text/javascript">
document.write(myFunction())
</script>

 

<p>The script in the body section calls a function.</p>

 

<p>The function returns a text.</p>

 

</body>
</html>

 


带参数的函数返回值的例子:

 


<html>
<head>

 

<script type="text/javascript">
function total(numberA,numberB)
{
return numberA + numberB
}
</script>

 

</head>
<body>

 

<script type="text/javascript">
document.write(total(2,3))
</script>

 

<p>The script in the body section calls a function with two arguments, 2 and 3.</p>

 

<p>The function returns the sum of these two arguments.</p>

 

</body>
</html>

 


条件语句的例子

 


简单条件语句的例子:

 

<html>
<body>

 

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

 

if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>

 

<p>
This example demonstrates the If statement.
</p>

 

<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
</p>

 

</body>
</html>

 

if ... else 的条件语句的例子:

 


<html>
<body>

 

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

 

if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>

 

<p>
This example demonstrates the If...Else statement.
</p>

 

<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>

 

</body>
</html>

 


用随机数产生连接的例子:

 

<html>
<body>

 

<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.w3schools.com'>Learn Web Development!</a>")
}
else
{
document.write("<a href='http://www.refsnesdata.no'>Visit Refsnes Data!</a>")
}
</script>

 

</body>
</html>

 

多条件的语句实现的例子:

 

<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
 case 5:
  document.write("Finally Friday")
 break
 case 6:
  document.write("Super Saturday")
 break
 case 0:
  document.write("Sleepy Sunday")
 break
 default:
  document.write("I'm really looking forward to this weekend!")
}
</script>

 

<p>This example demonstrates the switch statement.</p>

 

<p>You will receive a different greeting based on what day it is.</p>

 

<p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

 

</body>
</html>

 


循环的例子:

 

for循环的一个例子:

 

<html>
<body>

 

<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i)
document.write("<br>")
}
</script>

 

<p>Explanation:</p>

 

<p>The for loop sets <b>i</b>  equal to 0.</p>

 

<p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

 

<p><b>i</b> will increase by 1 each time the loop runs.</p>

 

</body>
</html>

 

复杂循环的一个例子:

 

<html>
<body>

 

<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>

 

</body>
</html>

 

按条件循环while的例子:

 

<html>
<body>

 

<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>

 

<p>Explanation:</p>

 

<p><b>i</b>  equal to 0.</p>

 

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

 

<p><b>i</b> will increase by 1 each time the loop runs.</p>

 

</body>
</html>

 

do...while循环的例子:

 

<html>
<body>

 

<script type="text/javascript">
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>

 

<p>Explanation:</p>

 

<p><b>i</b>  equal to 0.</p>

 

<p>The loop will run</p>

 

<p><b>i</b> will increase by 1 each time the loop runs.</p>

 

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

 


</body>
</html>

 


字符串对象的例子:

 

 

 

检测字符串长度的例子:

 

<html>
<body>

 

<script type="text/javascript">
var str="W3Schools is great!"
document.write("<p>" + str + "</p>")
document.write(str.length)
</script>

 

</body>
</html>

 


检测子字符串位置的例子:

 

<html>
<body>

 

<script type="text/javascript">
var str="W3Schools is great!"
var pos=str.indexOf("School")
if (pos>=0)
{
document.write("School found at position: ")
document.write(pos + "<br />")
}
else
{
document.write("School not found!")
}
</script>

 

<p>This example tests if a string contains a specified word. If the word is found it returns the position of the first character of the word in the original string. Note: The first position in the string is 0!</p>

 

</body>
</html>

 

检测子字符串是否存在的例子:

 

<html>
<body>

 

<script type="text/javascript">
var str = "W3Schools is great!"
document.write(str.match("great"))
</script>

 

<p>This example tests if a string contains a specified word. If the word is found it returns the word.</p>

 

</body>
</html>

 


取子字符串的例子:

 

<html>
<body>

 

<script type="text/javascript">
var str="W3Schools is great!"
document.write(str.substr(2,6))
document.write("<br /><br />")
document.write(str.substring(2,6))
</script>

 

<p>
The substr() method returns a specified part of a string. If you specify (2,6) the returned string will be from the second character (start at 0) and 6 long.
</p>

 

<p>
The substring() method also returns a specified part of a string. If you specify (2,6) it returns all characters from the second character (start at 0) and up to, but not including, the sixth character.
</p>

 

</body>
</html>

 

转换字符串的大小写

 

<html>
<body>

 

<script type="text/javascript">
var str=("Hello JavaScripters!")
document.write(str.toLowerCase())
document.write("<br>")
document.write(str.toUpperCase())
</script>

 

</body>
</html>

 


数组对象的实例

 


数组简单应用的例子:

 


<html>
<body>

 

<script type="text/javascript">
var famname = new Array(6)
famname[0] = "Jan Egil"
famname[1] = "Tove"
famname[2] = "Hege"
famname[3] = "Stale"
famname[4] = "Kai Jim"
famname[5] = "Borge"

 

for (i=0; i<6; i++)
{
document.write(famname[i] + "<br>")
}
</script>

 

</body>
</html>

 


另一种使用数组的方法:

 

<html>
<body>

 

<script type="text/javascript">
var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")

 

for (i=0; i<famname.length; i++)
{
document.write(famname[i] + "<br>")
}
</script>

 

</body>
</html>

 


使用数组的一些属性和方法:

 

<html>
<body>

 

<script type="text/javascript">
var famname = new Array(3)
famname[0] = "Jani"
famname[1] = "Tove"
famname[2] = "Hege"

 

document.write(famname.length + "<br>")
document.write(famname.join(".") + "<br>")
document.write(famname.reverse() + "<br>")
document.write(famname.push("Ola","Jon") + "<br>")
document.write(famname.pop() + "<br>")
document.write(famname.shift() + "<br>")
</script>

 

</body>
</html>

 


数组的两个方法concat和slice

 

<html>
<body>

 

<script type="text/javascript">
var famname = new Array(3)
famname[0] = "Jani"
famname[1] = "Tove"
famname[2] = "Hege"

 

var famname2 = new Array(3)
famname2[0] = "John"
famname2[1] = "Andy"
famname2[2] = "Wendy"

 

var famname3 = new Array("Stale","Borge")

 

document.write(famname.join() + "<br>")
document.write(famname.concat(famname2) + "<br>")
document.write(famname.concat(famname2,famname3) + "<br>")
document.write(famname.slice(1) + "<br>")
</script>

 

</body>
</html>

 

日期相关例子:

 


显示今天的日期:

 

<html>
<body>

 

<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>

 

</body>
</html>

 


显示当前的时间:

 

<html>
<body>

 

<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>

 

</body>
</html>

 

设置日期:

 

<html>
<body>

 

<script type="text/javascript">
var d = new Date()
d.setFullYear("1990")
document.write(d)
</script>

 

</body>
</html>

 

UTC时间:

 

<html>
<body>

 

<script type="text/javascript">
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>

 

</body>
</html>

 

显示当前的星期:

 

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
document.write("Today is " + weekday[d.getDay()])
</script>
</body>
</html>

 

显示当前的日期和星期:

 

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>

 

一个走动的时间:

 

<html>
<head>
<script type="text/javascript">
var timer = null

 

function stop()
{
clearTimeout(timer)
}

 

function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>

 

数学对象的例子:

 


<html>
<body>

 

<script type="text/javascript">
document.write(Math.round(7.25))
</script>

 

</body>
</html>

 


产生0-1之间的随机数的例子

 

<html>
<body>

 

<script type="text/javascript">
document.write(Math.random())
</script>

 

</body>
</html>

 

产生0-10的随机数的例子

 

<html>
<body>

 

<script type="text/javascript">
no=Math.random()*10
document.write(Math.round(no))
</script>

 

</body>
</html>

 


求最大数的例子:

 

<html>
<body>

 

<script type="text/javascript">
document.write(Math.max(2,4))
</script>

 

</body>
</html>

 

求最小数的例子:

 

<html>
<body>

 

<script type="text/javascript">
document.write(Math.min(2,4))
</script>

 

</body>
</html>

 

Convert Celsius to Fahrenheit

 


<html>
<head>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
 {
 F=document.myform.celsius.value * 9 / 5 + 32
 document.myform.fahrenheit.value=Math.round(F)
 }
else
 {
 C=(document.myform.fahrenheit.value -32) * 5 / 9
 document.myform.celsius.value=Math.round(C)
 }
}
</script>
</head>
<body>

 

<b>Insert a number in either input field, and the number will be converted into
either Celsius or Fahrenheit.</b>
<br />
<form name="myform">
<input name="celsius" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input name="fahrenheit" onkeyup="convert('F')"> degrees Fahrenheit
</form>
<br />
Note that the <b>Math.round</b> method is used,
so that the result will be returned as a whole number.

 

</body>
</html>

 


转变字符为数字的例子

 

<html>
<head>

 

<script type="text/javascript">
function toUnicode()
{
var str=document.myForm.myInput.value
if (str!="")
 {
 unicode=str.charCodeAt(0)
 }
document.myForm.unicode.value=unicode
}
</script>
</head>
<body>

 

<form name="myForm">
Write a character:<br />
<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">
<hr />
The character's Unicode:<br />
<input size="3" name="unicode">
</form>

 

</html>

 


超级连接对象

 

用按钮来改变连接位置的例子:

 

<html>

 

<head>
<script type="text/javascript">
function myHref()
{
document.getElementById('myAnchor').innerText="Visit W3Schools"
document.getElementById('myAnchor').href="http://www.w3schools.com"
}
</script>
</head>

 

<body>
<a id="myAnchor" href="http://www.microsoft.com">Visit Microsoft</a>
<form>
<input type="button" onclick="myHref()" value="Change URL and text">
</form>
</body>

 

</html>

 


改变连接的打开方式的例子:

 

<html>

 

<head>
<script type="text/javascript">
function myTarget()
{
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>

 

<body>
<a id="myAnchor" href="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="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(txt)
</script>
</body>

 

</html>

 


计算一个页面中图形的个数

 

<html>

 

<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">

 

<p>
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
</p>
</body>

 

</html>

 

显示表单的名字

 

<html>

 

<body>
<form name="Form1">
Name: <input type="text" size="20">
</form>
<form name="Form2">
Age: <input type="text" size="3">
</form>

 

<p><b>You can use the form's number:</b></p>
<script type="text/javascript">
document.write("<p>The first form's name is: ")
document.write(document.forms[0].name + "</p>")
document.write("<p>The second form's name is: ")
document.write(document.forms[1].name + "</p>")
</script>

 

<p><b>Or, the form's name (will not work in Netscape):</b></p>
<script type="text/javascript">
document.write("<p>The first form's name is: ")
document.write(document.forms("Form1").name + "</p>")
document.write("<p>The second form's name is: ")
document.write(document.forms("Form2").name + "</p>")
</script>
</body>

 

</html>

 


事件对象

 

单击弹出窗口

 

<html>
<head>
<script type="text/javascript">
function whichButton()
{
if (event.button==1)
{
alert("You clicked the left mouse button!")
}
else
{
alert("You clicked the right mouse button!")
}
}
</script>
</head>

 

<body onmousedown="whichButton()">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>

 

</html>

 


单击弹出窗口显示鼠标的位置

 

<html>
<head>
<script type="text/javascript">
function show_coords()
{
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
</head>

 

<body onmousedown="show_coords()">
<p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p>
</body>

 

</html>

 


按一个键则显示该键的ASCII码

 

<html>
<head>
<script type="text/javascript">
function whichButton()
{
alert(event.keyCode)
}

 

</script>
</head>

 

<body onkeyup="whichButton()">
<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>
<p>Press a key on your keyboard. An alert box will alert the unicode of the key pressed.</p>
</body>

 

</html>

 


单击任何地方显示鼠标在页面的坐标

 

<html>
<head>

 

<script type="text/javascript">
function coordinates()
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}

 

</script>
</head>
<body onmousedown="coordinates()">

 

<p>
Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor, relative to the screen.
</p>

 

</body>
</html>

 


单击之后显示文档的鼠标坐标

 

<html>
<head>

 

<script type="text/javascript">
function coordinates()
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}

 

</script>
</head>
<body onmousedown="coordinates()">

 

<p>
Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor.
</p>

 

</body>
</html>

 

 

 

显示SHIFT是否被按下

 

<html>
<head>

 

<script type="text/javascript">
function isKeyPressed()
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}

 

</script>
</head>
<body onmousedown="isKeyPressed()">

 

<p>
Click somewhere in the document. An alert box will tell you if you pressed the shift key or not.
</p>

 

</body>
</html>

 


单击显示我们页中的标签

 

<html>
<head>
<script type="text/javascript">
function whichElement()
{
var tname
tname=event.srcElement.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

 

<body onmousedown="whichElement()">
<p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p>

 

<h3>This is a header</h3>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">
</body>

 

</html>

 


显示事件发生的类型

 

<html>
<head>

 

<script type="text/javascript">
function whichType()
{
alert(event.type)
}
</script>
</head>

 

<body onmousedown="whichType()">

 

<p>
Click on the document. An alert box will alert which type of event occurred.
</p>

 

</body>
</html>

 


表单对象

 

用表单显示地址:

 

<html>

 

<head>
<script type="text/javascript">
function getAction()
{
var x=document.forms.myForm
alert(x.action)
}

 

function changeAction()
{
var x=document.forms.myForm
x.action="default.asp"
alert(x.action)
}
</script>
</head>

 

<body>
<form name="myForm" action="js_examples.asp">
<input type="button" onclick="getAction()" value="View value of action attribute">
<br /><br />
<input type="button" onclick="changeAction()" value="Change value of action attribute">
</form>
</body>

 

</html>

 


显示表单所使用的方法

 

<html>

 

<head>
<script type="text/javascript">
function formMethod()
{
var x=document.forms.myForm
alert(x.method)
}
</script>
</head>

 

<body>
<form name="myForm" method="post">
Name: <input type="text" size="20"><br /><br />
<input type="button" onclick="formMethod()" value="Show method">
</form>
</body>

 

</html>

 

重置表单

 

<html>
<head>

 

<script type="text/javascript">
function formReset()
{
var x=document.forms.myForm
x.reset()
}
</script>

 

</head>
<body>

 

<form name="myForm">
<p>Enter some text in the text fields and then press the "Reset form" button</p>
<input type="text" size="20"><br />
<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset form">
</form>

 

</body>
</html>

 

提交表单

 

<html>

 

<head>
<script type="text/javascript">
function formSubmit()
{
document.forms.myForm.submit()
}
</script>
</head>

 

<body>
<form name="myForm" action="js_form_action.asp" method="get">
Firstname: <input type="text" name="firstname" size="20"><br />
Lastname: <input type="text" name="lastname" size="20"><br /><br />
<input type="button" onclick="formSubmit()" value="Submit">
</form>
</body>

 

</html>

 


对email的验证

 

<html>

 

<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
at=x.email.value.indexOf("@")
if (at == -1)
 {
 alert("Not a valid e-mail")
 return false
 }
}
</script>
</head>

 

<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your E-mail:
<input type="text" name="email" size="20">
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> This example ONLY tests if the e-mail address contains an "@" character. A "real-life" code
would have to test for punctuations, spaces and other things as well.</p>
</body>

 

</html>

 


输入指定的数才能提交表单

 

<html>

 

<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
txt=x.myInput.value
if (txt>=1 && txt<=5)
 {
 return true
 }
else
 {
 alert("Must be between 1 and 5")
 return false
 }
}
</script>
</head>

 

<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter a value from 1 to 5: <input type="text" name="myInput" size="20">
<input type="submit" value="Submit">
</form>
</body>

 

</html>

 


输入特定长的字符才能提交表单

 

<html>

 

<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
 {
 alert("The field cannot contain more than 5 characters!")
 return false
 }
else
 {
 return true
 }
}
</script>
</head>

 

<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter some text (you will get a message if you add more than 5 characters):
<input type="text" name="myInput" size="20">
<input type="submit" value="Submit">
</form>
</body>

 

</html>

 


对表单的检测

 

<html>

 

<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
at=x.email.value.indexOf("@")
code=x.code.value
firstname=x.fname.value
submitOK="True"

 

if (at==-1)
 {
 alert("Not a valid e-mail!")
 submitOK="False"
 }
if (code<1 || code>5)
 {
 alert("The value must be between 1 and 5")
 submitOK="False"
 }
if (firstname.length>10)
 {
 alert("Your name must be less than 10 characters")
 submitOK="False"
 }
if (submitOK=="False")
 {
 return false
 }
}
</script>
</head>

 

<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
Enter your e-mail: <input type="text" name="email" size="20"><br />
Enter a value from 1 to 5: <input type="text" name="code" size="20"><br />
Enter your name, max 10 chararcters: <input type="text" name="fname" size="20"><br />
<input type="submit" value="Submit">
</form>
</body>

 

</html>

 


设置表单中的一项获得焦点

 

<html>

 

<head>
<script type="text/javascript">
function setfocus()
{
document.forms[0].field.focus()
}
</script>
</head>

 

<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Set focus" onclick="setfocus()">
</form>
</body>

 

</html>

 


选择文本框中的文本

 

<html>

 

<head>
<script type="text/javascript">
function setfocus()
{
document.forms[0].txt.select()
document.forms[0].txt.focus()
}
</script>
</head>

 

<body>
<form>
<input type="text" name="txt" size="30" value="Hello World!">
<input type="button" value="Select text" onclick="setfocus()">
</form>
</body>

 

</html>

 


下拉列表框的取值

 

<html>
<head>
<script type="text/javascript">
function put()
{
txt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].text
document.forms[0].favorite.value=txt
}
</script>
</head>

 

<body>
<form>
Select your favorite browser:
<select name="myList" onchange="put()">
 <option>Internet Explorer</option>
 <option>Netscape</option>
 <option>Opera</option>
</select>
<br /><br />
Your favorite browser is: <input type="text" name="favorite" size="20">
</form>
</body>

 

</html>

 


单选按钮的取值

 

<html>

 

<head>
<script type="text/javascript">
function check(browser)
{
document.forms[0].answer.value=browser
}
</script>

 

</head>

 

<body>
<form>
Select which browser is your favorite:<br /><br />
<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="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br />
<br />
<input type="text" name="answer" size="20">
</form>
</body>

 

</html>

 


下拉列表的值的显示

 

<html>
<head>
<script type="text/javascript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>

 

<body>
<form>
Select numbers:<br />
<select name="dropdown">
 <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="put()" value="-->">
<input type="text" name="number" size="20">
</form>
</body>

 

</html>

 


下拉列表的连接

 

<html>
<head>
<script type="text/javascript">
function go(form)
{
location=form.selectmenu.value
}
</script>
</head>

 

<body>
<form>
<select name="selectmenu" onchange="go(this.form)">
  <option>--Select page--</option>
  <option value="http://www.microsoft.com">Microsoft</option>
  <option value="http://www.altavista.com">AltaVista</option>
  <option value="http://www.w3schools.com">W3Schools</option>
</select>
</form>
</body>

 

</html>

 


光标自动跳到下一个文本区

 

<html>
<head>
<script type="text/javascript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
 {
 next=elmnt.tabIndex
 if (next<document.forms[0].elements.length)
  {
  document.forms[0].elements[next].focus()
  }
 }
}
</script>
</head>

 

<body>
<p>This script automatically jumps to the next input field when the current field's maxlength has been reached.</p>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>

 

</html>

 


Frame, Frameset 和 IFrame 对象

 

平分两个页面

 

<html>
<frameset id="myFrameset" cols="50%,50%">
  <frame id="leftFrame" src="frame_a_noresize.htm">
  <frame id="rightFrame" src="frame_a.htm">
</frameset>
</html>

 

<html>
<head>
<script type="text/javascript">
function disableResize()
{
parent.document.getElementById("lef



相关阅读:
WordPress wp_list_cats函数
php生成WAP页面
使Ext的Template可以解析二层的json数据的方法
windows与linux 路径正则写法
使用Kylix3开发Apache DSO
MS Server和Oracle中对NULL处理的一些细节差异
程序中常用的种代码
MySQL5触发器教程
asp.net repeater手写分页实例代码
SQL2005的维护计划无法删除的解决方法
HTML表格标记教程(8):背景图像属性BACKGROUND
mysql4.1数据转换指南
javascript 不让鼠标事件触发
PHP字符串 ==比较运算符的副作用
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4