js實現簡單的數字時鍾
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 實現簡單的數字時鍾效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head> 8 <body> 9 <div class="demo"> 10 <span id="nowTime"></span> 11 </div> 12 </body> 13 <script type="text/javascript"> 14 var newDate = ''; 15 getLangDate(); 16 function dateFilter(date){ //值小於10時，在前面補0 17 if(date < 10){ 18 return "0"+date; 19 } 20 return date; 21 } 22 23 function getLangDate(){ 24 var dateObj = new Date(); //表示當前系統時間的Date對象 25 var year = dateObj.getFullYear(); //當前系統時間的完整年份值 26 var month = dateObj.getMonth()+1; //當前系統時間的月份值 27 var date = dateObj.getDate(); //當前系統時間的月份中的日 28 var day = dateObj.getDay(); //當前系統時間中的星期值 29 var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; 30 var week = weeks[day]; //根據星期值，從數組中獲取對應的星期字符串 31 var hour = dateObj.getHours(); //當前系統時間的小時值 32 var minute = dateObj.getMinutes(); //當前系統時間的分鍾值 33 var second = dateObj.getSeconds(); //當前系統時間的秒鍾值 34 var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //當前時間屬於上午、晚上還是下午 35 newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second); 36 document.getElementById("nowTime").innerHTML = "當前時間： "+newDate+" "+week; 37 setTimeout(getLangDate,1000); 38 } 39 </script> 40 </html>