實現的功能：
首先這是前端顯示的內容，沒有后台的配置哈；
1.顯示當前年月下的日歷表；
2.今天的日期獨有背景色；
3.當月今天之前的日子號數顏色變淺，表示日期已過；
4.點擊日期簽到；（只能點擊當天簽到成功）；
未實現的功能：
1.進入頁面就獲取當月的簽到日期，添加簽到小圖標
2.點擊簽到還未實現提交簽到的信息之后台
截圖：
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>手機版日歷當月簽到</title> <link rel="stylesheet" href="css/calendar_Dodui.css" /> </head> <body> <div id="calendar_Dodui"> <div id="calendarYm_Dodui"><span id="year"></span>年<span id="month"></span>月</div> <div id="week_Dodui"> <span>日</span> <span>一</span> <span>二</span> <span>三</span> <span>四</span> <span>五</span> <span>六</span> </div> <div id="dayBG_Dodui"> <ul id="daydataBG_Dodui"></ul> <ul id="dataNums_Dodui"></ul> </div> </div> <script type="text/javascript" src="js/jquery-1.9.1.js" ></script> <script type="text/javascript" src="js/calendar_Dodui.js"></script> </body> </html>
CSS:
-----calendar_Dodui.css
* {margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body {width:100%;height:100%;background:#f2f2f2;}
ul,li {list-style:none;}
#calendar_Dodui {width:100%;background:#289860;}
#calendarYm_Dodui {height:3em;width:100%;line-height:3em;font-size:1.2em;color:#fff;text-indent:10%;border-bottom:1px solid #fff;}
#calendarYm_Dodui span {/*display:block;*/padding:0 6%;}
#week_Dodui {width:100%;color:#fff;font-size:1.2em;display:flex;height:3rem;}
#week_Dodui span {display:block;width:calc(100% / 7);text-align:center;line-height:3rem;}
#dayBG_Dodui {background:#fff;position:relative;width:100%;height:auto;}
#daydataBG_Dodui {position:relative;width:100%;height:18.7em;}
#daydataBG_Dodui li {display:block;width:calc(97.6% / 7);background:#f0f0f0;height:3em;float:left;margin:.2% .2%;}
#daydataBG_Dodui li:nth-of-type(7n-6) {margin-left:0;}
#daydataBG_Dodui li:nth-of-type(7n) {margin-right:0;}
#dataNums_Dodui {position:absolute;top:0;left:0;width:100%;height:auto;}
#dataNums_Dodui li {display:block;width:calc(97.6% / 7);height:3em;float:left;margin:.2% .2%;text-align:center;line-height:3em;font-size:1em;}
#dataNums_Dodui li:nth-of-type(7n-6) {margin-left:0;}
#dataNums_Dodui li:nth-of-type(7n) {margin-right:0;}
#chooseCalendar_Dodui {width:100%;height:18em;background:#fff;position:fixed;bottom:0;left:0;}
.yearMonth {width:100%;height:3em;background:#289860;color:#fff;position:relative;}
.yearMonth span {display:inline-block;width:5em;height:2.4em;line-height:2.4em;text-align:center;font-size:1.3em;text-align:center;}
.yearMonth span:nth-of-type(2) {position:absolute;right:0;top:0;}
.chooseYearMonth {width:100%;height:auto;display:flex;}
.chooseYearMonth ul {width:50%;text-align:center;height:15em;overflow:scroll;}
.chooseYearMonth ul li {line-height:3em;}
#chkYearMonth {width:100%;height:3em;position:absolute;top:9em;left:0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;}
JAVASCRIPT:
------calendar_Dodui.js
var daydataBG_Dodui = document.getElementById("daydataBG_Dodui");
var htmlLi = "";
for(var i = 0; i < 42; i++) {
htmlLi += "<li class='bgli'></li>";
}
daydataBG_Dodui.innerHTML += htmlLi;
var Dodui_Date = new Date();
var DoduiYear = Dodui_Date.getFullYear(); //年
var DoduiMonth = Dodui_Date.getMonth() + 1; //月
var DoduiDate = Dodui_Date.getDate(); //日
document.getElementById("year").innerHTML = DoduiYear;
document.getElementById("month").innerHTML = DoduiMonth;
//步驟1：獲取年份，判斷是否是閏年；
function isLeapYear(year) {
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
//是閏年
} else {
//是平年
}
}
//步驟2：獲取當前初始月份，得到相應年月下的天數；
var d = new Date(DoduiYear, DoduiMonth, 0); //當前年月下的天數
console.log("當前月份下的天數：" + d.getDate())
//步驟3：當前月份天數下的1號是星期幾,及本月有多少天
var date = new Date();
date.setDate(1);
var weekday = new Array(7);
weekday[0] = "星期日";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";
console.log("本月第一天是 " + weekday[date.getDay()]);
//date.setMonth(date.getMonth() + 1);
//var lastDate = new Date(date - 3600000*24);
//console.log("本月最后一天是 " + lastDate.getDate());
//初始化
isLeapYear(DoduiYear); //初始年
var dataNum = d.getDate(); //返回初始年月下的天數
var weekOne = weekday[date.getDay()]; //初始化本月的1號是星期幾
console.log(weekOne)
//獲取1號排列前的空白數
var emptyDivs;
function emptyDiv() {
if(weekOne == "星期天") {
emptyDivs = 0;
} else if(weekOne == "星期一") {
emptyDivs = 1;
} else if(weekOne == "星期二") {
emptyDivs = 2;
} else if(weekOne == "星期三") {
emptyDivs = 3;
} else if(weekOne == "星期四") {
emptyDivs = 4;
} else if(weekOne == "星期五") {
emptyDivs = 5;
} else if(weekOne == "星期六") {
emptyDivs = 6;
}
console.log("返回前期空白數：" + emptyDivs)
}
emptyDiv();
var emptyHtml1 = "";
for(var i = 0; i < emptyDivs; i++) {
emptyHtml1 += "<li class='emptyli1 ggli'></li>";
}
document.getElementById("dataNums_Dodui").innerHTML += emptyHtml1;
var dayNumHtml1 = "";
for(var i = 1; i <= dataNum; i++) {
dayNumHtml1 += "<li class='Numli1 ggli'>" + i + "</li>";
}
document.getElementById("dataNums_Dodui").innerHTML += dayNumHtml1;
//設置今天號數背景色為綠色
var num1 = (DoduiDate + emptyDivs);
console.log(num1)
document.getElementsByClassName("ggli")[num1 - 1].classList.add("nowDataDodui");
document.getElementsByClassName("ggli")[num1 - 1].setAttribute('style', 'background-color: #289860;color:#ffffff')
for(var i = 0; i < num1 - 1; i++) {
document.getElementsByClassName("ggli")[i].setAttribute('style', 'color:#ccc')
}
//簽到
var nowqd = true;
$(".ggli").on("click", function() {
if($(this).hasClass("nowDataDodui")) {
document.getElementsByClassName("nowDataDodui")[0].setAttribute("style", "background-color: #289860;background-image:url(images/DODUI.png);background-size: 48%;background-repeat: no-repeat;background-position: center;color: transparent;")
alert("簽到成功天")
//簽到提交至服務器-開始 // $.ajax({ // type: "post", // url: "", //服務器連接地址 // data: { // "參數名": "參數值", // "參數名": "參數值" // }, //格式是json的格式哦（我一般就用的json，當然還是有其它格式哈） // dataType: 'json', // success: function(data) { // //成功執行 // // }, // // error: function(data2) { // //失敗執行 // } // }) //這塊地內容屬於簽到提交至服務器
nowqd = false;
} else {
alert("只能簽到當天")
}
})
以上代碼僅僅是前端代碼，還未實現后台的數據交互（需要你自己在紅字區域調整）