<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" οnsubmit="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" οnclick="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" οnclick="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" οnchange="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" οnclick="check(this.value)" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" οnclick="check(this.value)" value="Netscape">Netscape<br /> <input type="radio" name="browser" οnclick="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" οnclick="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" οnchange="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" οnkeyup="toUnicode(this,this.value)"> <input size="3" tabindex="2" maxlength="3" οnkeyup="toUnicode(this,this.value)"> <input size="3" tabindex="3" maxlength="3" οnkeyup="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("leftFrame").noResize=true parent.document.getElementById("rightFrame").noResize=true } function enableResize() { parent.document.getElementById("leftFrame").noResize=false parent.document.getElementById("rightFrame").noResize=false } </script> </head>
<body bgcolor="#EFE7D6"> <form> <input type="button" οnclick="disableResize()" value="No resize"> <input type="button" οnclick="enableResize()" value="Resize"> </form> <p>Try to resize the frame.</p> <p>Right-click inside the two frames and select "View Source" to see the source code.</p> </body>
</html>
是否显示滚动条
<html> <frameset id="myFrameset" cols="50%,50%"> <frame id="leftFrame" src="frame_a_scrolling.htm"> <frame id="rightFrame" src="frame_a.htm"> </frameset> </html>
<html> <head> <script type="text/javascript"> function enableScrolling() { parent.document.getElementById("leftFrame").scrolling="yes" parent.document.getElementById("rightFrame").scrolling="yes" } function disableScrolling() { parent.document.getElementById("leftFrame").scrolling="no" parent.document.getElementById("rightFrame").scrolling="no" } </script> </head>
<body bgcolor="#EFE7D6"> <form> <input type="button" οnclick="enableScrolling()" value="Scroll bars"> <input type="button" οnclick="disableScrolling()" value="No scroll bars"> </form> <p>Right-click inside the frames and select "View Source" to see the source code.</p> </body>
</html>
改变页面的地址：
<html> <frameset id="myFrameset" cols="50%,50%"> <frame id="leftFrame" src="frame_a_src.htm"> <frame id="rightFrame" src="frame_a.htm"> </frameset> </html>
<html> <head> <script type="text/javascript"> function newSrc() { parent.document.getElementById("leftFrame").src="default.asp" parent.document.getElementById("rightFrame").src="http://www.w3schools.com" } </script> </head>
<body bgcolor="#EFE7D6"> <form> <input type="button" οnclick="newSrc()" value="Change frame source"> </form> <p>Right-click inside the two frames and select "View Source" to see the source code.</p> </body>
</html>
跳出框架
<html> <head> <script type="text/javascript"> function breakout() { if (window.top!=window.self) { window.top.location="tryjs_breakout.htm" } } </script> </head>
<body> <form> Click the button to break out of the frame: <input type="button" οnclick="breakout()" value="Break out!"> </form> </body>
</html>
更新两个页面
<html> <frameset rows="25%,*" frameborder="1"> <frame name="upperframe" src="frame_a.htm"> <frame name="lowerframe" src="frames_sourcepage.htm"> </frameset> </html>
<html> <head> <script type="text/javascript"> function changeurl() { parent.upperframe.location.href="frame_b.htm" parent.lowerframe.location.href="frame_c.htm" } </script> </head> <body>
<form> <input type="button" οnclick="changeurl()" value="Change url"> </form> <p>Right-click inside the two frames and select "View Source" to see the source code.</p> </body>
</html>
更新2个以上的页面
<html> <frameset cols="70%,*" frameborder="1"> <frame src="frames_sourcepage2.htm"> <frameset rows="30%,*" frameborder="1"> <frame name="uframe" src="frame_a.htm"> <frame name="lframe" src="frame_b.htm"> </frameset> </frameset> </html>
<html> <head> <script type="text/javascript"> function changeurl() { parent.uframe.location.href="frame_c.htm" parent.lframe.location.href="frame_d.htm" } </script> </head>
<body> <form> <input type="button" value="Change url" οnclick="changeurl()"> </form> <p>Right-click inside the three frames and select "View Source" to see the source code.</p> </body>
</html>
更新两个IFRAME
<html> <head> <script type="text/javascript"> function twoframes() { document.all("frame1").src="frame_c.htm" document.all("frame2").src="frame_d.htm" } </script> </head>
<body> <iframe src="frame_a.htm" name="frame1"></iframe> <iframe src="frame_b.htm" name="frame2"></iframe> <br /> <form> <input type="button" οnclick="twoframes()" value="Change url of the two iframes"> </form> </body>
</html>
图象对象
改变图象的高度
<html> <head> <script type="text/javascript"> function setHeight() { var x=document.images x[0].height="250" } </script> </head>
<body> <img src="compman.gif" width="107" height="98" /> <form> <input type="button" οnclick="setHeight()" value="Change height of image"> </form> </body>
</html>
改变图象
<html> <head> <script type="text/javascript"> function setSrc() { var x=document.images x[0].src="hackanm.gif" } </script> </head>
<body> <img src="compman.gif" width="107" height="98" /> <form> <input type="button" οnclick="setSrc()" value="Change image"> </form> </body>
</html>
改变图象的宽度
<html> <head> <script type="text/javascript"> function setWidth() { var x=document.images x[0].width="300" } </script> </head>
<body> <img src="compman.gif" width="107" height="98" /> <form> <input type="button" οnclick="setWidth()" value="Change Width"> </form> </body>
</html>
定位：
显示当前页的地址和改变当前页的地址
<html> <head> <script type="text/javascript"> function curr_Location() { alert(location) } function change_Location() { window.location="http://www.w3schools.com" } </script> </head>
<body> <form> <input type="button" οnclick="curr_Location()" value="Show current URL"> <input type="button" οnclick="change_Location()" value="Change URL"> </form> </body>
</html>
刷新页面
<html> <head> <script type="text/javascript"> function refresh() { window.location.reload() } </script> </head>
<body> <form> <input type="button" value="Refresh page" οnclick="refresh()"> </form> </body>
</html>
导航对象
检测你的浏览器
<html>
<body> <script type="text/javascript"> document.write("You are browsing this site with: "+ navigator.appName) </script> </body>
</html>
显示浏览器更加详细的信息
<html> <body> <script type="text/javascript"> document.write("<p>Browser: ") document.write(navigator.appName + "</p>")
document.write("<p>Browserversion: ") document.write(navigator.appVersion + "</p>")
document.write("<p>Code: ") document.write(navigator.appCodeName + "</p>")
document.write("<p>Platform: ") document.write(navigator.platform + "</p>")
document.write("<p>Cookies enabled: ") document.write(navigator.cookieEnabled + "</p>")
document.write("<p>Browser's user agent header: ") document.write(navigator.userAgent + "</p>") </script> </body> </html>
最详细的浏览器的信息
<html> <body>
<script type="text/javascript"> var x = navigator document.write("CodeName=" + x.appCodeName) document.write("<br />") document.write("MinorVersion=" + x.appMinorVersion) document.write("<br />") document.write("Name=" + x.appName) document.write("<br />") document.write("Version=" + x.appVersion) document.write("<br />") document.write("CookieEnabled=" + x.cookieEnabled) document.write("<br />") document.write("CPUClass=" + x.cpuClass) document.write("<br />") document.write("OnLine=" + x.onLine) document.write("<br />") document.write("Platform=" + x.platform) document.write("<br />") document.write("UA=" + x.userAgent) document.write("<br />") document.write("BrowserLanguage=" + x.browserLanguage) document.write("<br />") document.write("SystemLanguage=" + x.systemLanguage) document.write("<br />") document.write("UserLanguage=" + x.userLanguage) </script>
</body> </html>
按浏览器不同实现导航
<html> <head> <script type="text/javascript"> function redirectme() { bname=navigator.appName if (bname.indexOf("Netscape")!=-1) { window.location="tryjs_netscape.htm" return } if (bname.indexOf("Microsoft")!=-1) { window.location="tryjs_microsoft.htm" return } window.location="tryjs_other.htm" } </script> </head> <body οnlοad="redirectme()"> </body> </html>
检测浏览器的版本
<html> <head> <script type="text/javascript"> function browserversion() { txt="Your browser is unknown" browser=navigator.appVersion if (browser.indexOf("2.")>-1) { txt="Your browser is from the stone-age!" } if (browser.indexOf("3.")>-1) { txt="You should update your browser!" } if (browser.indexOf("4.")>-1) { txt="Your browser is good enough!" } document.getElementById("message").innerHTML=txt } </script> </head>
<body οnlοad="browserversion()"> <span id="message"></span> </body>
</html>
选择对象
设置下拉列表的可用性
<html> <head> <script type="text/javascript"> function makeDisable() { var x=document.getElementById("mySelect") x.disabled=true } function makeEnable() { var x=document.getElementById("mySelect") x.disabled=false } </script> </head>
<body> <form> <select id="mySelect"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" οnclick="makeDisable()" value="Disable list"> <input type="button" οnclick="makeEnable()" value="Enable list"> </form> </body>
</html>
返回下拉列表中选择的项的值
<html> <head> <script type="text/javascript"> function formAction() { var x=document.getElementById("mySelect") alert(x.length) } </script> </head>
<body> <form> <select id="mySelect"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" οnclick="formAction()" value="How many options in the list?"> </form> </body> </html>
改变下拉列表的大小
<html> <head> <script type="text/javascript"> function formAction() { var x=document.getElementById("mySelect") x.size="3" } </script> </head>
<body> <form> <select name="mySelect"> <option>Apple</option> <option>Banana</option> <option>Orange</option> <option>Melon</option> </select> <input type="button" οnclick="formAction()" value="Change size of list"> </form> </body>
</html>
列表可选择多项
<html> <head> <script type="text/javascript"> function formAction() { var x=document.getElementById("mySelect") x.multiple=true } </script> </head>
<body> <p> Before you click on the "Select multiple" button, try to select more than one option (by holding down the shift or Ctrl key). Click on the "Select multiple" button and try again. </p> <form> <select name="mySelect" size="3"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" οnclick="formAction()" value="Select multiple"> </form> </body>
</html>
返回所选列表的文本值
<html> <head> <script type="text/javascript"> function getText() { var x=document.getElementById("mySelect") alert(x.options[x.selectedIndex].text) } </script> </head>
<body> <form> Select your favorite fruit: <select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option> </select> <br /><br /> <input type="button" οnclick="getText()" value="Show text of selected fruit"> </form> </body>
</html>
删除列表的项目
<html> <head> <script type="text/javascript"> function formAction() { var x=document.getElementById("mySelect") x.remove(x.selectedIndex) } </script> </head>
<body> <form> <select name="mySelect"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" οnclick="formAction()" value="Remove option"> </form> </body>
</html>
显示屏幕的信息
<html> <body> <script type="text/javascript"> document.write("Screen resolution: ") document.write(screen.width + "*" + screen.height) document.write("<br />") document.write("Available view area: ") document.write(screen.availWidth + "*" + screen.availHeight) document.write("<br />") document.write("Color depth: ") document.write(screen.colorDepth) document.write("<br />") </script> </body> </html>
表格对象
改变表格的边框
<html> <head> <script type="text/javascript"> function changeBorder() { document.getElementById('myTable').border="10" } </script> </head>
<body> <table border="1" id="myTable"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <form> <input type="button" οnclick="changeBorder()" value="Change Border"> </form> </body>
</html>
改变表格的间距
<html> <head> <script type="text/javascript"> function padding() { document.getElementById('myTable').cellPadding="15" } function spacing() { document.getElementById('myTable').cellSpacing="15" } </script> </head> <body>
<table id="myTable" border="1"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <form> <input type="button" οnclick="padding()" value="Change Cellpadding"> <input type="button"
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
