数学对象的例子：
<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" οnkeyup="convert('C')"> degrees Celsius<br /> equals<br /> <input name="fahrenheit" οnkeyup="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" οnkeyup="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" οnclick="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" οnclick="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" οnclick="getfocus()" value="Get Focus"> <input type="button" οnclick="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" οnclick="check()" value="Check Checkbox"> <input type="button" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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 οnmοusedοwn="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 οnmοusedοwn="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 οnkeyup="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 οnmοusedοwn="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 οnmοusedοwn="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 οnmοusedοwn="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 οnmοusedοwn="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 οnmοusedοwn="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" οnclick="getAction()" value="View value of action attribute"> <br /><br /> <input type="button" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnsubmit="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" οnsubmit="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" οnsubmit="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>
787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
