打印本文 打印本文 关闭窗口 关闭窗口
菜鸟学习javascript实例教程
作者:武汉SEO闵涛  文章来源:敏韬网  点击数3894  更新时间:2009/4/23 11:22:06  文章录入:mintao  责任编辑:mintao
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

上一页  [1] [2] [3] [4] [5] [6] [7]  下一页

打印本文 打印本文 关闭窗口 关闭窗口