效果图：
条件：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';*/
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
