文、意如老師
續上一篇 — 聯成電腦分享：Javascript網頁程式_處理日期、時間篇（上）
熟練以上基礎工後，接下來要讓日期/時間隨時即時更新。
任務一：認識setInterval() 函數，設定事件間隔時間（重複執行）
任務二：認識setTimeout() 函數，設定事件間隔時間（只執行一次）
任務三：認識onload 事件，網頁載入事件
任務四：實作即時更新日期/時間
任務五：客製化自己的日期/時間
任務六：認識 clearInterval() 函數，清除設定的間隔時間
任務一：認識setInterval() 函數
說明：事件在固定的間隔時間重複執行。
公式：setInterval(event,time)
此函數需要代入兩個參數
參數1：event 代入功能事件
參數2：time 代入間隔時間(以毫秒為單位)，1000毫秒 = 1秒
範例：點選按鈕後間隔5秒跳出 ”您好”。
<!--建置按鈕-->
<button onclick="mytouch()">觸發</button>
<!--建立變數儲存發生事件-->
var myparam;
<!--點選按鈕時執行-->
function mytouch() {
<!--呼叫事件執行間隔-->
myparam = setInterval(myevent, 5000);
}
<!--執行事件-->
function myevent() {
alert("您好");
}
完整程式碼：
任務二：認識setTimeout() 函數
說明：事件在固定的時間只會執行一次。
公式：setTimeout (event,time)
此函數需要代入兩個參數
參數1：event 代入功能事件
參數2：time 代入間隔時間(以毫秒為單位)，1000毫秒 = 1秒
範例：點選按鈕後5秒跳出 ”您好”。
把剛剛的範例函數改成setTimeout()
<!--點選按鈕時執行-->
function mytouch() {
<!--呼叫事件執行-->
myparam = setTimeout(myevent, 5000);
}
完整程式碼：
任務三：認識onload 事件
說明：在頁面跑完後，馬上執行的事件，通常會寫在html 標籤中的<body></body>
公式：<body onload="event()">
範例：
<!--頁面載完時執行mytouch()事件-->
<body onload=mytouch()>
完整程式碼：
任務四：實作即時更新日期/時間
Step1：先建立等等要放日期時間的空盒子<span></span>，並給空盒子一個名字，這邊取名id="current"。
<span id="current"> </span>
Step2：建立一個功能function事件:先在空盒子上填上目前的日期時間
function current_time(){
document.getElementById('current').innerHTML = new Date();
}
Step3：每秒執行一次
function current_time(){
document.getElementById('current').innerHTML = new Date();
setTimeout('current_time()',1000); //每秒呼叫一次功能:
}
Step4：重複自己呼叫自己
function current_time(){
document.getElementById('current').innerHTML = new Date();
setTimeout('current_time()',1000); //每秒呼叫一次功能:
current_time() //再次呼叫自己
}
Step5：最後在網頁一載入時馬上呼叫功能: current_time()
<body onload="current_time()">
完整程式碼：
任務五：客製化自己的日期時間
參考以下的表：抓出年、月、日、時、分、秒
標準日期時間 |
Today = new Date() |
年 |
Today.getFullYear() |
月份（月份固定+1） |
(Today.getMonth()+1) |
日 |
Today.getDate() |
時 |
Today.getHours() |
分 |
Today.getMinutes() |
秒 |
Today.getSeconds() |
，接著點選2.尺規上任意位置，你會發現3.所有靠右邊的文字（價錢）乖乖的跑到你點選的位置了。
用法與剛剛的靠右定位點使用方式相同，將定位點固定在尺規的任意位置上，要調整的文字（價格）則會對齊在定位點的中間位置上。
也是一樣，點擊切換1.定位點到靠左定位點，再點選2.尺規上任意位置，要調整的文字（價格）則會對齊在定位點的右邊位置上。
，再點選2.尺規上任意位置，你會發現你的小數點已經對齊定位點了。
，它就是一條垂直的線，你可以加在你想要的任何地方。
，再點選2.尺規上任意位置，分隔線馬上出現，接著你就可以隨心所意的左拖右拖調整定位點分隔線的位置。
