- 浏览: 111982 次
- 性别:
- 来自: 江西
文章分类
最新评论
-
antsshadow:
如何在IE6、IE7、IE8中使用HTML5 canvas -
fei_6666:
请问 $('#livemargins_contro' ).bg ...
jquery.bgiframe.js解决下拉列表框被遮盖(iE 6下存在的情况) -
geliyang:
function(value,element)这里的value ...
Jquery Validator 的addMethod用法備忘
用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("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" onclick="disableResize()" value="No resize">
<input type="button" onclick="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" onclick="enableScrolling()" value="Scroll bars">
<input type="button" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="curr_Location()" value="Show current URL">
<input type="button" onclick="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" onclick="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 onload="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 onload="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" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="padding()" value="Change Cellpadding">
<input type="button"/>
中企速联
<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("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" onclick="disableResize()" value="No resize">
<input type="button" onclick="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" onclick="enableScrolling()" value="Scroll bars">
<input type="button" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="curr_Location()" value="Show current URL">
<input type="button" onclick="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" onclick="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 onload="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 onload="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" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="padding()" value="Change Cellpadding">
<input type="button"/>
中企速联
发表评论
-
在js文件中显示jquery的智能提示VS2010
2012-05-25 15:30 0///<reference path="jqu ... -
关于浏览器内核的一些概念
2011-12-14 11:37 877什么是浏览器内核 要想搞清楚浏览器内核是什么, ... -
将手机网站做成手机应用的JS框架
2011-11-30 14:26 971将手机网站做成手机应用的JS框架 发表于 2010年09月1日 ... -
jquery实现无缝图片滚动
2011-10-24 13:58 954<!DOCTYPE HTML> <html& ... -
JS变量的作用域
2011-10-18 14:53 798JavaScript中变量的作用域非常奇特,如果不仔细研究,一 ... -
图片延迟加载之随滚动条显示
2011-10-18 14:38 1453经常上tudou网,发现tudou首页加载图片的功能很有意思, ... -
jquery实现tab选项卡
2011-09-08 10:36 1128<section class="recomme ... -
常用JS代码大全
2011-09-07 18:42 2193事件源对象 event.srcElement ... -
jquery实现自定义select表单
2011-09-06 19:09 922<!DOCTYPE html PUBLIC " ... -
jquery实现图片幻灯片切换代码
2011-09-01 19:20 665<!DOCTYPE html PUBLIC " ... -
js控制图片自动等比例缩放
2011-08-29 16:17 883function imgfix(){ var maxw ... -
json返回数组的处理。
2011-08-16 12:28 1319后台返回json的格式为“{'name':'woe','age ... -
50个jQuery代码段帮你成为更好的JavaScript开发者
2011-08-16 12:26 11331. 如何创建嵌套的过滤器: -
javascript基础知识大集锦(2)
2011-08-15 12:44 664本期主题:正则表达式 call(),apply(),calle ... -
javascript基础知识大集锦(1)
2011-08-15 12:42 801主要知识点:js数组,数字函数,字符串函数,表单验证,hash ... -
用 Javascript 实现检测、添加、移除样式(className)
2011-08-12 16:36 933前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时 ... -
iframe自适应高度
2011-08-08 17:45 700父页: <script type="text ... -
jQuery插件通用的框架
2011-06-07 12:05 885/* * tableUI 0.1 * ... -
jQuery图片切换,轮播效果
2011-05-26 18:06 2578<!DOCTYPE html PUBLIC " ... -
jQuery图片切换,轮播效果
2011-05-26 13:34 2062用jQuery实现迅雷首页(http://xunlei.com ...
相关推荐
基于Springboot的实验报告系统源码数据库文档.zip
GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载
基于springboot智能健康饮食系统源码数据库文档.zip
基于SpringBoot的校园服务系统源码数据库文档.zip
内容概要: IXIA测试仪的基本配置.doc ixia测试仪基础使用示例.doc IxNetwork如何进行抓包回放-V1.0.pdf IxNetwork如何自定义报文-V2.0.pdf ixia构造ip分片方法.txt IxNetwork使用简介.pdf 适用人群:网络协议造包、打流相关的测试工程技术人员,想要学习的同学可以下载哈 使用场景:构造pcap包,打流 Ixia简介 IXIA使用的是Server-client模式,Server端在测试仪表的主机上,在开机后会随着主机内的操作系统的启动而自动启动,一般情况下不需要人为的手工启动。因此在通常不需要为主机配置专用的显示器和键盘。 client端包括两个测试软件: Ixia Explorer和ScriptMate。这两个软件一般安装在测试用计算机上,在仪表自带的主机中也有这两个软件。根据测试项目的不同来选择使用不同的软件。Ixia Explorer主要提供数据流的测试,针对设备的功能进行测试; ScriptMate提供各种性能测试窗口,针对设备的性能进行测试。 Auto:自动分配;
基于Python+Django花卉商城系统源码数据库文档.zip
Umi-OCR-main.zip
基于微信小程序开发的促销抽奖小工具源码,适用于初学者了解小程序开发过程以及简单抽奖工具的实现。
GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载
以下是一个关于Spring Boot设计的资源描述及项目源码的简要概述: Spring Boot设计资源描述 Spring Boot是一个为基于Spring的应用提供快速开发工具的框架,其设计旨在简化Spring应用的初始搭建和开发过程。以下是一些关键资源: Spring Boot官方文档:详细阐述了Spring Boot的核心特性、自动配置原理、起步依赖、内嵌式服务器等关键概念。这是学习和掌握Spring Boot设计的首选资源。 在线教程与视频:各大在线教育平台提供了丰富的Spring Boot教程和视频课程,从基础入门到高级应用,帮助开发者全面了解和掌握Spring Boot设计。 书籍与电子资料:许多技术书籍和在线电子资料深入讲解了Spring Boot的设计原理、最佳实践和项目案例,为开发者提供了宝贵的学习资源。 项目源码示例 以下是一个简单的Spring Boot项目源码示例,用于演示Spring Boot的基本结构和自动配置功能: java // 引入Spring Boot依赖 @SpringBootApplication public class MySpri
基于springboot美妆领域管理系统源码数据库文档.zip
tables-3.7.0+gpl-cp37-cp37m-win_amd64.whl
算法是计算机科学的核心,它们在解决各种问题时发挥着关键作用。一个好的算法不仅可以提高程序的效率,还可以简化复杂的问题。下面我将通过一个具体的例子——快速排序算法(Quick Sort)——来展示算法的实现过程,包括资源描述和项目源码。 ### 快速排序算法简介 快速排序是一种高效的排序算法,采用分治法的思想。其基本步骤如下: 1. 从数列中挑出一个元素,称为“基准”(pivot)。 2. 重新排序数列,所有比基准值小的元素放到基准前面,所有比基准值大的元素放到基准后面(相同的数可以到任一边)。在这个分割结束之后,该基准就处于数列的中间位置。这个称为分割(partition)操作。 3. 递归地(recursive)把小于基准值的子数列和大于基准值的子数列排序。 ### 资源描述 快速排序算法因其高效性和简洁性,在实际应用中非常受欢迎。它的时间复杂度平均为 O(n log n),最坏情况下为 O(n^2),但这种情况很少发生。快速排序的空间复杂度为 O(log n),因为它使用了递归来实现。 快速排序的一个典型应用场景是在数据库系统中对大量数据进行排序。由于它的高效性,快速排序
基于springboot农场投入品运营线上管理系统源码数据库文档.zip
基于springboot个性化影院推荐系统源码数据库文档.zip
linux基础进阶笔记,配套视频:https://www.bilibili.com/list/474327672?sid=4493093&spm_id_from=333.999.0.0&desc=1
小程序 微信自动抢红包动态库.zip程序资源学习资料参考
小程序 iOS版微信抢红包插件(支持后台抢红包).zip
经典-FPGA时序约束教程
基于springboot的智慧点餐系统源码数据库文档.zip