高階 JavaScript 例項
阿新 • • 發佈:2019-01-31
檢測瀏覽器及版本
<html> <body> <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) document.write("瀏覽器名稱:"+ browser) document.write("<br />") document.write("瀏覽器版本:"+ version) </script> </body> </html>
檢測瀏覽器的更多資訊
<html> <body> <script type="text/javascript"> document.write("<p>瀏覽器:") document.write(navigator.appName + "</p>") document.write("<p>瀏覽器版本:") document.write(navigator.appVersion + "</p>") document.write("<p>程式碼:") document.write(navigator.appCodeName + "</p>") document.write("<p>平臺:") document.write(navigator.platform + "</p>") document.write("<p>Cookies 啟用:") document.write(navigator.cookieEnabled + "</p>") document.write("<p>瀏覽器的使用者代理報頭:") 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 detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的瀏覽器夠先進了!")}
else
{alert("是時候升級您的瀏覽器了!")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
建立一個歡迎 cookie
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
按鈕動畫
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="/index.html" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
添加了 JavaScript 的影象對映
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世紀 60 年代,金星一直被認為是地球的孿生姐妹,因為金星是離我們最近的行星,同時還由於兩者擁有很多共同的特徵。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('從地球上是很難研究水星的,這是由於它和太陽的距離總是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太陽和類似木星這樣的氣態行星是到目前為止太陽系中最大的物體。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
簡單的計時
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="顯示定時的警告框" onClick = "timedMsg()">
</form>
<p>請點選上面的按鈕。警告框會在 5 秒後顯示。</p>
</body>
</html>
另一個簡單的計時
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="顯示計時的文字" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>點選上面的按鈕。輸入框會顯示出已經逝去的時間(2、4、6 秒)。</p>
</body>
</html>
在一個無窮迴圈中的計時事件
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="開始計時!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>請點選上面的按鈕。輸入框會從 0 開始一直進行計時。</p>
</body>
</html>
帶有停止按鈕的無窮迴圈中的計時事件
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="開始計時!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計時!" onClick="stopCount()">
</form>
<p>請點選上面的“開始計時”按鈕來啟動計時器。輸入框會一直進行計時,從 0 開始。點選“停止計時”按鈕可以終止計時。</p>
</body>
</html>
使用計時事件製作的鐘表
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
建立物件的例項
<html>
<body>
<script type="text/javascript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Adams"
personObj.age=35
personObj.eyecolor="black"
document.write(personObj.firstname + " 的年齡是 " + personObj.age + " 歲。")
</script>
</body>
</html>
建立用於物件的模板
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person("John","Adams",35,"black")
document.write(myFather.firstname + " 的年齡是 " + myFather.age + " 歲。")
</script>
</body>
</html>