效果圖：
條件：1.有一點html和css基礎（不需要太多，不是很懂也沒關系）
2.有一定邏輯語言基礎
3.用到3個js語句
思路：1.用js里面的math語句獲得當前的日期時間（不懂可以百度）；
2.輸出頂部三排（較簡單）
利用document.getElementById('id').innerHTML=要輸出的值
頂部三排就做出來了。
3.輸出底部的日歷
建一個二維數組，將星期和日期全部存進去
利用循環遍歷，把數組輸出
分為兩部分，當行數為一時，輸出第一行
行數不是一時，全部輸出
tab+="<td style='background:red'>"+(n[i][j])+"</td>"
因為全部輸出完之后再標紅會多出一個，要是使用替換的話，抱歉不會。
所以，在一個一個輸出時，判斷數組中的數是不是當天日期，是的話在生成的時候就直接標紅，用條件判斷語句
最后輸出成功后再簡單調節一下css就完成了。
html代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>日歷</title> 6 </head> 7 <body> 8 <div class="box"> 9 <div id="year_mouth_day"> </div> 10 <div id="week"> </div> 11 <div id="shizhong"> </div> 12 <div id="div1"></div> 13 </div> 14 <link rel="stylesheet" href="日歷.css"> 15 <script type="text/javascript" src="日歷.js"></script> 16 </body> 17 </html>
css代碼：
1 .box { 2 margin: 0; 3 position: fixed; 4 top:0%; 5 left:0%; 6 width: 400px; 7 height: 400px; 8 border: 2px; 9 border-radius: 10px; 10 background-color: #8de695; 11 text-align: center; 12 } 13 #year_mouth_day { 14 font-size: 40px; /* 寬度 */ 15 font-weight: 10px; /* 厚度 */ 16 } 17 #week { 18 font-size: 20px; 19 font-weight: 10px; 20 margin: 10px 10px 10px 10px; 21 } 22 #shijian { 23 24 } 25 table { 26 margin: auto; 27 border-spacing: 18px; 28 border: 2px; 29 border-radius: 10px; 30 background:rgba(0,255,0,0.4); 31 border-collapse: collapse; /* 合並內邊框 */ 32 } 33 td { 34 padding: 0px; 35 margin: 0; 36 text-align: center; /* 文本居中 */ 37 width: 40px; 38 height: 40px; 39 border-radius: 10px; 40 border:solid 2px #add9c0; 41 42 }
js代碼：
1 function startTime() { 2 var today = new Date() 3 var year = today.getFullYear() //年 4 var mouth = today.getMonth()+1 //月 5 var day = today.getDate() //日 6 var week = today.getDay() //周 7 var h = today.getHours() //時 8 var m = today.getMinutes() //分 9 var s = today.getSeconds() //秒 10 // add a zero in front of numbers<10 為了美觀 11 var week_hanzi=['天','一','二','三','四','五','六',] //將數字周改為漢字 12 m = checkTime(m) 13 s = checkTime(s) 14 document.getElementById('year_mouth_day').innerHTML = year + "年" +mouth+"月"+day+"日" 15 document.getElementById('week').innerHTML = "星期 "+week_hanzi[week] 16 document.getElementById('shizhong').innerHTML = h + ":" + m + ":" + s 17 t = setTimeout('startTime()', 500) 18 19 // add a zero in front of numbers<10 為了美觀 20 function checkTime(i) { 21 if (i < 10) { 22 i = "0" + i 23 } 24 return i 25 } 26 27 var tab='<table>' 28 var i,j; 29 var n=[[0,1,2,3,4,5,6], 30 [0,0,0,1,2,3,4], 31 [5,6,7,8,9,10,11], 32 [12,13,14,15,16,17,18], 33 [19,20,21,22,23,24,25], 34 [26,27,28,29,30,31,0]]; 35 36 for( i=0;i<6;i++){ 37 tab+='<tr>' 38 for(j=0;j<7;j++){ 39 if(i==0){ //第一排星期 40 if(n[0][j]==week) 41 tab+="<td style='background:red'>"+week_hanzi[j]+"</td>" 42 else 43 tab+="<td>"+week_hanzi[j]+"</td>" 44 } 45 else{ //其他排日期 46 if(n[i][j]==day) 47 tab+="<td style='background:red'>"+(n[i][j])+"</td>" 48 else 49 tab+="<td >"+(n[i][j])+"</td>" 50 //document.write(n[i][j]); 51 } 52 } 53 tab+='</tr>' 54 } 55 tab+='</table>'; 56 div1.innerHTML=tab 57 } 58 59 startTime() 60 61 /*if(week==7) 62 document.getElementById("Sun").id = 'red';*/