实现的功能:

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

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. 【mysql】【windows】MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助。

    成功安装以后,启动MySQL,输入: net start mysql 提示: ”MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助.” 查了下, ...

  2. hihocoder1175 拓扑排序2

    #1175 : 拓扑排序·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho所在学校的校园网被黑客入侵并投放了病毒.这事在校内BBS上立刻引起了大家的讨论 ...

  3. cs229课程索引

    重要说明 这个系列是以cs229为参考,梳理下来的有关机器学习传统算法的一些东西.所以说cs229的有些内容我会暂时先去掉放在别的部分里面,也会加上很多重要的,但是cs229没有讲到的东西.而且本系列 ...

  4. 由浅入深学习PBR的原理和实现

    目录 一. 前言 1.1 本文动机 1.2 PBR知识体系 1.3 本文内容及特点 二. 初阶:PBR基本认知和应用 2.1 PBR的基本介绍 2.1.1 PBR概念 2.1.2 与物理渲染的差别 2 ...

  5. luogu1233 木棍加工

    先排个序然后做最长上升子序列就行了. #include <algorithm> #include <iostream> #include <cstdio> usin ...

  6. jquery拼接字符串

    1. $("#div").append("<table><tr align='center'>" +"<td >& ...

  7. ubuntu检测到系统错误解决方法

    解决方案: 1.打开终端,输入 sudo gedit /etc/default/apport 2.把里面的enabled=1改成enabled=0,保存

  8. JDBC 学习笔记(二)—— 详解 JDBC 的四种驱动类型

    JDBC 有四种驱动类型,分别是: JDBC-ODBC 桥(JDBC-ODBC bridge driver plus ODBC driver) 本地 API 驱动(Native-API partly ...

  9. 【bzoj4269】再见Xor 高斯消元求线性基

    题目描述 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. 输入 第一行一个正整数N. 接下来一行N个非负整数. 输出 一行,包含两 ...

  10. 校赛——1096Is The Same?(KMP或字符串的最小、大表示法)

    1096: Is The Same? Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 26  Solved: 8[Submit][Status][Web B ...