WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

2-4. function 的使用

需要重複執行的工作

當工作需要重複執行時,將工作程序的撰寫包在 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>  

 

 

go TOP