0.效果預(yù)覽
簡(jiǎn)易
只實(shí)現(xiàn)了日歷最基礎(chǔ)的功能寓落，當(dāng)前日期紅色顯示，可通過(guò)上方的左右按鈕查看上一月或下一月的日期搔预。
1.HTML部分
<body>
<div id="cldFrame">
<div id="cldBody">
<table>
<thead>
<tr>
<td colspan="7">
<div id="top">
<span id="left"><</span>
<span id="topDate"></span>
<span id="right">></span>
</div>
</td>
</tr>
<tr id="week">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</body>
2.CSS部分
#cldFrame{
position: relative;
width: 440px;
margin: 50px auto;
}
#cldBody{
margin: 10px;
position: absolute;
width: 420px;
}
#top{
position: relative;
height: 60px;
text-align: center;
line-height: 60px;
}
#topDate{
font-size: 30px;
}
.curDate{
color: red;
font-weight: bold;
}
table{
background-color: #f7f7f7;
}
#week td{
font-size: 15px;
}
td{
height: 60px;
width: 60px;
text-align: center;
font-family: Simsun;
font-size: 20px;
}
#left, #right{
position: absolute;
width: 60px;
height: 60px;
}
#left{left: 0px;}
#right{right: 0px;}
#left:hover, #right:hover{
background-color: rgba(30, 30, 30, 0.2);
}
Html+Css
當(dāng)前顯示月份和日期下面將在JS中添加曲伊。
3.JS部分及原理講解
先介紹兩個(gè)常用的和時(shí)間有關(guān)的函數(shù)织阅，相信大多數(shù)人都接觸過(guò)~
①判斷某年是否是閏年
/*判斷某年是否是閏年*/
function isLeap(year) {
if((year%4==0 && year%100!=0) || year%400==0){
return true;
}
else{
return false;
}
}
二月大概是十二個(gè)月份中最不安分的一個(gè)月。
②判斷某年某月某日是星期幾
var monthDay = [31,0,31,30,31,30,31,31,30,31,30,31];
在這之前用數(shù)組存放每個(gè)月有多少天绎签，我這里將二月的天數(shù)設(shè)置成了0枯饿，之后再?zèng)Q定是加28還是29。
/*判斷某年某月某日是星期幾诡必，默認(rèn)日為1號(hào)*/
function whatDay(year, month, day=1) {
var sum = 0;
sum += (year-1)*365+Math.floor((year-1)/4)-Math.floor((year-1)/100)+Math.floor((year-1)/400)+day;
for(var i=0; i<month-1; i++){
sum += monthDay[i];
}
if(month > 2){
if(isLeap(year)){
sum += 29;
}
else{
sum += 28;
}
}
return sum%7; //余數(shù)為0代表那天是周日奢方，為1代表是周一，以此類推
}
這個(gè)函數(shù)是為了判斷某年某月的1號(hào)是星期幾而設(shè)定的擒权，實(shí)際上可以不設(shè)置day這個(gè)參數(shù)袱巨，加上了day這個(gè)變量，允許使用者在查某日的日期是星期幾時(shí)也能調(diào)用這個(gè)函數(shù)碳抄。
③日歷添加部分
根據(jù)當(dāng)前日期決定日歷顯示哪個(gè)月的日期愉老，根據(jù)那月的1號(hào)是星期幾決定1號(hào)的添加位置，前方用空格子填充剖效。該月添加完后后方也用空格子補(bǔ)齊嫉入。
/*顯示日歷*/
function showCld(year, month, firstDay){
var i;
var tagClass = "";
var nowDate = new Date();
var days;//從數(shù)組里取出該月的天數(shù)
if(month == 2){
if(isLeap(year)){
days = 29;
}
else{
days = 28;
}
}
else{
days = monthDay[month-1];
}
/*當(dāng)前顯示月份添加至頂部*/
var topdateHtml = year + "年" + month + "月";
var topDate = document.getElementById('topDate');
topDate.innerHTML = topdateHtml;
/*添加日期部分*/
var tbodyHtml = '<tr>';
for(i=0; i<firstDay; i++){//對(duì)1號(hào)前空白格的填充
tbodyHtml += "<td></td>";
}
var changLine = firstDay;
for(i=1; i<=days; i++){//每一個(gè)日期的填充
if(year == nowDate.getFullYear() && month == nowDate.getMonth()+1 && i == nowDate.getDate()) {
tagClass = "curDate";//當(dāng)前日期對(duì)應(yīng)格子
}
else{
tagClass = "isDate";//普通日期對(duì)應(yīng)格子，設(shè)置class便于與空白格子區(qū)分開(kāi)來(lái)
}
tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
changLine = (changLine+1)%7;
if(changLine == 0 && i != days){//是否換行填充的判斷
tbodyHtml += "</tr><tr>";
}
}
if(changLine!=0){//添加結(jié)束璧尸，對(duì)該行剩余位置的空白填充
for (i=changLine; i<7; i++) {
tbodyHtml += "<td></td>";
}
}//實(shí)際上不需要填充后方咒林，但強(qiáng)迫癥必須整整齊齊！
tbodyHtml +="</tr>";
var tbody = document.getElementById('tbody');
tbody.innerHTML = tbodyHtml;
}
調(diào)用后爷光，日歷就可以完整顯示了~
var curDate = new Date();
var curYear = curDate.getFullYear();
var curMonth = curDate.getMonth() + 1;
showCld(curYear,curMonth,whatDay(curYear,curMonth));
④下一月與上一月
function nextMonth(){
var topStr = document.getElementById("topDate").innerHTML;
var pattern = /\d+/g;
var listTemp = topStr.match(pattern);
var year = Number(listTemp[0]);
var month = Number(listTemp[1]);
var nextMonth = month+1;
if(nextMonth > 12){
nextMonth = 1;
year++;
}
document.getElementById('topDate').innerHTML = '';
showCld(year, nextMonth, whatDay(year, nextMonth));
}
function preMonth(){
var topStr = document.getElementById("topDate").innerHTML;
var pattern = /\d+/g;
var listTemp = topStr.match(pattern);
var year = Number(listTemp[0]);
var month = Number(listTemp[1]);
var preMonth = month-1;
if(preMonth < 1){
preMonth = 12;
year--;
}
document.getElementById('topDate').innerHTML = '';
showCld(year, preMonth, whatDay(year, preMonth));
}
兩者沒(méi)多大差別垫竞，別忘了要綁定到按鈕上：
document.getElementById('right').onclick = function(){
nextMonth();
}
document.getElementById('left').onclick = function(){
preMonth();
}
更多有趣的功能等待著你去添加~
