JavaScript 的３個程式基本能力，與３個物件基本控制

運用時間物件來練習,再控制網頁區塊物件來呈現結果【結果展示參考】

<body>
    <header>
        <h1>以JS認識程式基本能力與物件基本控制</h1>
        <div id="currentTime">此刻時間：</div>
    </header>
    <div id="main"></div>
    <footer></footer>
</body>

<style>
/* CSS註解：設定上述物件的CSS樣式 */
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; }
</style>

JS 第一階段

<script>

//單行註解：#main 出現登入時間=========================================
/*
    多行區塊註解
    多行區塊註解
    多行區塊註解
*/

//運用「變數」記憶=後面的資料，Date()得到的是此刻時間格式化後的字串
var now = Date();

//文件中取得ID名稱為main的區塊物件,指定內容為=後面的字串
//document.getElementById('main')是「物件」，innerHTML是「屬性」

document.getElementById('main').innerHTML = '登入時間: '+now;

//準備讓header右上角出現目前時間========================================
//設計者自定的函式(){ 準備好將執行的程式 }

function runTime(){
    now = new Date();     //new表示將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();

    //設定變數=指定變數與中文字串的連接組合
    var nowStr = nowY+'年'+nowM+'月'+nowD+'日星期'+nowW+' '+nowH+':'+nowI+':'+nowS;     
    //alert(nowStr);
    //文件中取得ID名稱為currentTime的區塊物件,指定內容為=後面的字串
    document.getElementById('currentTime').innerHTML = '此刻時間：'+nowStr;
}
    
runTime();     //呼叫執行runTime函式執行一次

</script>

JS 第二階段：加判斷式

<script>

var now = Date();
document.getElementById('main').innerHTML = '登入時間: '+now;

function runTime(){
    now = new 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; }

   　//判斷得到的星期值換成中文字顯示 ******************************(新增部份)
    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;
}
    
runTime();

</script>

JS 第三階段：加重複程式的迴圈

<script>

var now = Date();
document.getElementById('main').innerHTML = '登入時間: '+now;

function runTime(){
    now = new 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; }

    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;
}
    
runTime();  //馬上呼叫執行runTime函式執行一次

//每隔1000毫秒後,執行一次runTime函式 ******************************(新增部份)
setInterval( runTime, 1000);

</script>

JS 第四階段：加物件的滑鼠事件控制

<script>

var now = Date();
document.getElementById('main').innerHTML = '登入時間: '+now;

function runTime(){
    now = new 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; }

    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;
}
    
runTime();
var myInterval = setInterval( runTime, 1000);   // *******(修正部份：加上變數記憶)

//當目前時間區塊被點選會切換時間的啟動與停止 *******************************(新增部份)
var IO = 1;  //設定IO變數來記錄目前時間是否在動, =1 表示在動

//當ID名稱為currentTime的物件被click時, 執行以下準備好的function工作
document.getElementById('currentTime').onclick = function(){
    //判斷現在時間是不是在動
    if( IO == 1 ){
        //如果目前時間在動, 則讓時間停止
        clearInterval(myInterval);    //清除 myInterval (計時用的啟動器)
        IO = 0;                       //讓IO變數記錄為0, 表示時間停止
    }else{
        //否則, 讓時間啟動
        runTime();                    //馬上執行一次runTime()函式
        //再次設定 myInterval 變數，設定啟動計時用的啟動器
        myInterval = setInterval( runTime, 1000); 
        IO = 1;
    }
}


</script>

JavaScript 的３個程式基本能力，與３個物件基本控制

運用時間物件來練習,再控制網頁區塊物件來呈現結果 【結果展示參考】

運用時間物件來練習,再控制網頁區塊物件來呈現結果【結果展示參考】