javascript基础实例教程(二)
来源：互联网 发布：淘宝网卖家版电脑版 编辑：程序博客网 时间：2024/04/29 03:42
数学对象的例子：
<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()*10document.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 + 32document.myform.fahrenheit.value=Math.round(F)}else {C=(document.myform.fahrenheit.value -32) * 5 / 9document.myform.celsius.value=Math.round(C)}}</script></head><body>
<b>Insert a number in either input field, and the number will be converted intoeither 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.valueif (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].namealert(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.myFormx[0].checked=true}
function uncheck(){var x=document.forms.myFormx[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].coffeeanswer=document.forms[0].answertxt=""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.clientXy=event.clientYalert("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.screenXy=event.screenYalert("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.xy=event.yalert("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 tnametname=event.srcElement.tagNamealert("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.myFormalert(x.action)}
function changeAction(){var x=document.forms.myFormx.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.myFormalert(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.myFormx.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.myFormat=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.myFormtxt=x.myInput.valueif (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.myForminput=x.myInput.valueif (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>
- javascript基础实例教程(二)
- javascript基础实例教程(一)
- javascript基础实例教程(三)
- javascript(基础整理二)
- JavaScript 基础之二
- javascript基础二
- javascript基础二
- javascript基础（二）
- JavaScript 基础 二
- JavaScript语言基础(二)
- 二 JavaScript基础语法
- Javascript基础（二）
- javascript基础二
- JavaScript进阶基础二
- Javascript基础（二）
- JavaScript基础（二）
- javaScript基础(二)
- javascript基础笔记(二)
- Spring事务的传播行为和隔离级别[transaction behavior and isolated level](转)
- CppUnit测试框架入门(1)
- 徐新：三位福布斯富豪的"接生婆"
- dwr与servlet spring 整合
- char varchar nvarchar 的区别
- javascript基础实例教程(二)
- javascript基础实例教程(三)
- PDM設置的小技巧
- 利用C#向word文档中写入数据
- FLEX blazeds 错误汇总
- 为什么美女喜欢软件开发的gg做老公.
- JavaScript教程--从入门到精通(1)
- Excel数据导入sql数据库(二)
- 基于Asterisk的VoIP开发指南——Asterisk 模块编写指南(1)
