首先源码来自https://github.com/zhaomenghuan/mui-demo/tree/master/example/calendar
源码只是个日历，并不包括显示已签到天数和签到功能。笔者另外添加了这部分功能。
以下代码不包括源码，只是笔者另外写的部分。
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="css/calendar.css"/> <link rel="stylesheet" type="text/css" href="css/mui.css"/> </head> <body> <script src="js/mui.js" type="text/javascript"></script> <script src="js/calendar.js" type="text/javascript" charset="utf-8"></script> </body> </html>
css
.calendar-content .chose{
color: #fff;
background-color:#2AC845;
border:0px solid #007AFF;
border-radius: 25px;
}
js在js/calendar.js后写入
var cld = new Calendar({ el: '#box', value: '', // 默认为new Date(); fn: function(obj) { console.log(JSON.stringify(obj)); } }); /*获取日期*/ var dateObj = new Date(); var nowDate=dateObj.getDate(); /*数组表示已签到日期*/ var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]; function getJsonObjLength(signList) { var Length = 0; for (var item in signList) { Length++; } return Length; } var count = getJsonObjLength(signList); var signday = signList[2].signDay; var canChooses=document.querySelectorAll(".canChoose"); console.log(canChooses.length); var signedrec=document.querySelector("#signedrec"); signedrec.innerHTML=count; for(i=0;i<nowDate;i++){ for(var j = 0; j < signList.length; j++){ if((i+1)==signList[j].signDay){ canChooses[i].classList.add("chose"); } console.log(signList.length); console.log(signList[j].signDay); } } var signbtn = document.querySelector("#sign"); signbtn.addEventListener('click',function(){ var today = document.querySelector(".today"); today.classList.add("chose"); today.classList.remove("today"); signedrec.innerHTML=count+1; });