當工作需要重複執行時,將工作程序的撰寫包在 function 的 { } 內,接著再重複呼叫執行。
常搭配 setInterval() 或 setTimeout() 函數重複呼叫執行 function。
當工作預想會執行但不是馬上執行的程式,撰寫包在 function 的 { } 內,需要執行時再呼叫 function 執行。
例如事件的註冊,例如滑鼠的滑入工作、滑鼠的點選工作....,當滑鼠滑入或點選時再呼叫 function 執行。
有關日期/時間函數請連結參考介紹:
w3schools Date概念(英文版) 或 w3schools get函數(英文版) 或
runoob(簡中版)
<header> <h1>以JS認識程式基本能力與物件基本控制</h1> <div id="currentTime">此刻時間:</div> <button>停止時間</button> </header> <div id="main"></div> <footer></footer>
<style> header{ background-color:#a9d7ff; height: 150px; position: relative; } #main { background-color:#e2b9e8; min-height: 300px; } footer{ background-color:#97cc9f; height: 50px; } #currentTime { background-color: darkblue; color: #FFF; padding: 10px; position: absolute; right: 0; top: 0; cursor: pointer; cursor: pointer; } header button { position: absolute; right: 0; top: 40px; padding: 10px; } </style>
<script> var runTimeIO; //在#main中顯示登入時間======================================== var now = Date(); //Date()取得user端目前時間並且格式化的字串 //alert(now); document.getElementById('main').innerHTML = '登入時間:'+now; //在#currentTime中顯示目前時間================================= function runTime (){ now = new Date(); //將Date()的結果新建成為可被控制的物件(時間物件) var nowY = now.getFullYear(); var nowM = now.getMonth()+1; var nowD = now.getDate(); var nowW = now.getDay(); var nowH = now.getHours(); var nowI = now.getMinutes(); var nowS = now.getSeconds(); //加以處理--------------------------------- if( nowH < 10 ){ nowH = '0'+nowH; } if( nowI < 10 ){ nowI = '0'+nowI; } if( nowS < 10 ){ nowS = '0'+nowS; } /* if( nowW == 0 ){ nowW = '日'; } if( nowW == 1 ){ nowW = '一'; } if( nowW == 2 ){ nowW = '二'; } if( nowW == 3 ){ nowW = '三'; } if( nowW == 4 ){ nowW = '四'; } if( nowW == 5 ){ nowW = '五'; } if( nowW == 6 ){ nowW = '六'; } */ switch( nowW ){ case 0: nowW = '日'; break; case 1: nowW = '一'; break; case 2: nowW = '二'; break; case 3: nowW = '三'; break; case 4: nowW = '四'; break; case 5: nowW = '五'; break; case 6: nowW = '六'; break; } //重新組合字串--------------------------------- var nowStr = nowY+'年'+nowM+'月'+nowD+'日星期'+nowW+' '+nowH+':'+nowI+':'+nowS; document.getElementById('currentTime').innerHTML = '此刻時間:'+nowStr; runTimeIO = setTimeout( runTime, 1000 ); } //setInterval( runTime , 1000 ); //每隔1000毫秒(1秒)後執行一次runTime這個function runTime(); //呼叫Fn馬上執行一次 //按一下button=>停止時間 document.getElementsByTagName('button').item(0).onclick = function(){ //alert('click'); clearTimeout(runTimeIO); } </script>