实现的功能：

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

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. hibernate简介以及简单配置

    Hibernate简介: Hibernate是一个开源对象关联关系映射的框架,他对JDBC做了轻量级的封装,使我们可以通过面向对象的思想操作数据库. 为什么要用Hibernate: 1: 对JDBC访 ...

  2. DeepFaceLab小白入门（1）：软件简介！

    简介 DeepFaceLab是一种利用深度学习识别和交换图片和视频中的人脸的工具 这是一个github上的开源项目,所有人都可以查看源代码也能免费使用.个人认为这个项目的最大优点就是安装超级简单,几乎 ...

  3. 下载旧版本的JDK

    下载旧版本的JDK 有的时候我们需要去下载旧版本的JDK,但是进入Oracle官网,显示的总是新版的JDK,这里告诉大家怎么样去下载旧版本的JDK. 首先去JavaSE的 下载界面 拉到最下面,找到这 ...

  4. Python基础——类

    创建类 class people: '帮助信息:dsafdaf' #所有实例都会共享的 number=100 #构造函数,初始化的方法,当创建一个类的时候,首先会调用它 def __init__(se ...

  5. Django小总结

    初始Git git init 初始化本地仓库,会在根目录下创建一个.git文件夹 git log 查看提交日志 git status 查看日志 git add 文件名 添加到缓存区 git commi ...

  6. Cheese Aizu - 0558 （搜索题）

    Time limit8000 ms Memory limit131072 kB チーズ () 問題 今年も JOI 町のチーズ工場がチーズの生産を始め,ねずみが巣から顔を出した．JOI 町は東西南北に ...

  7. fiddler 抓包数据不会自动下拉解决方法

    选中 view 里面的 AutoScroll Session List 即可

  8. Linux删除非空目录的方法

    rmdir 无法删除非空目录. rm -rf 可以递归,强制,删除目录

  9. linux下java命令行引用jar包

     一般情况下: 如果java 文件和jar 包在同一目录 poi-3.0-alpha3-20061212.jar testTwo.java 编译: javac -cp poi-3.0-alpha3-2 ...

  10. 1.ABP使用boilerplate模版创建解决方案

    1.到ABP框架的官网(http://www.aspnetboilerplate.com/),自动生成一个解决方案 每步注解: 第一步:AngularJS是一款比较火的SPA(Single Page ...