<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(); //判斷:時、分、秒只有個位數時在前面補0成為十位數 ****************(新增部份) 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>