网页前端之用JavaScript（JS）做一个简单的日历
Posted 訓言
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页前端之用JavaScript（JS）做一个简单的日历相关的知识，希望对你有一定的参考价值。
效果图：
??
条件：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‘;*/
以上是关于网页前端之用JavaScript（JS）做一个简单的日历的主要内容，如果未能解决你的问题，请参考以下文章