实现的功能：

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

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-日历签到的更多相关文章

  1. PHP实现日历签到，并实现累计积分功能

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式:使用的是calendar ...

  2. 使用 UICollectionView 实现日历签到功能

    概述 在 App 中,日历通常与签到功能结合使用.是提高用户活跃度的一种方式,同时,签到数据中蕴含了丰富的极其有价值的信息.下面我们就来看看如何在 App 中实现日历签到功能. 效果图 ..... 思 ...

  3. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  4. 百度的js日历

    <title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...

  5. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  6. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  7. php+mysql+jquery日历签到

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式: 2.本次签到只记录本月 ...

  8. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  9. js日历学习

    <!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...

  10. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

随机推荐

  1. k8s的pod生命周期

    pod的生命周期: 1.init container 2.main contianer (1) post start hook :容器启动后做什么操作(可以命令查看kubectl explain po ...

  2. linux文件属性文文件类型知识

    文件类型分别介绍: 1.普通文件:我们通过用ls  -l来查看xxx.sql的属性,可以看到第一列内容为-rw-r--r--,值得注意的是第一个符号是-(英文字符减号),在Linux中,以这样的字符开 ...

  3. GoF23种设计模式之行为型模式之命令模式

    一.概述 将一个请求封装为一个对象,从而可以使用不同的请求对客户端进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 二.适用性 1.当抽象出待执行的动作以参数化某个对象的时候. 2.当需要在 ...

  4. python2和python3，字典和json

    Python2的标准数据类型有: Numbers (数字) String (字符串) List (列表) Tuple (元组) Dictionary (字典) Python3的标准数据类型有: Num ...

  5. vss安装注意点

    一:装好IIS 二:win7用管理员权限打开 server configuration 才能打上勾 三:用计算机名,不要用 Ip地址

  6. Python虚拟机之if控制流（一）

    Python虚拟机中的if控制流 在所有的编程语言中,if控制流是最简单也是最常用的控制流语句.下面,我们来分析一下在Python虚拟机中对if控制流的实现 # cat demo.py a = 1 i ...

  7. tomcat6-endpoint设计

    之前写的一个ppt 搬到博客来

  8. python算法-汉诺塔问题

    汉诺塔问题   初始状态: 思考:当盘子的个数是3的时候,大家写出移动顺序 移动的步骤: 3个盘子,从a到c 1.前面两个盘子,从a到b 1)把前面一个盘子,从a到c a->c 2)把第二个盘子 ...

  9. Pycharm 简单设置

  10. list里内置程序用法

    列表是我们编程工作中经常都会遇到的数据类型.以下是列表里面的一些常用操作,主要分为:增! 删! 改! 查! first 查: 1.索引(下标),其中有切片操作,但要注意下标都是从零开始: 2.查元素出 ...