進階 JavaScript 執行個體03

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

簡單的計時

<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=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=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=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=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<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=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=35personObj.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=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolor}myFather=new person("John","Adams",35,"black")document.write(myFather.firstname + " 的年齡是 " + myFather.age + " 歲。")</script></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More