JS-日历签到

Posted YAZI

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-日历签到相关的知识，希望对你有一定的参考价值。

实现的功能：

首先这是前端显示的内容，没有后台的配置哈；

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("只能签到当天")
	}

})

　　

 

以上代码仅仅是前端代码，还未实现后台的数据交互（需要你自己在红字区域调整）

以上是关于JS-日历签到的主要内容，如果未能解决你的问题，请参考以下文章

android中怎么在日历中实现签到

Android开发有没有人做过日历控件，可以签到的

签到日历效果显示

签到日历插件

阅读项目：微信日历小程序插件

帮忙改一下js日历的日期的显示格式