基于jQuery的日历+每日签到功能
公司要开发一个h5页面，里边有一个每日签到抽奖的功能，本以为这样的插件应该会有很多，结果找到的全都是仅生成日历的插件，于是乎就出现了下面这个东西。（前端菜鸟，请大神嘴下留情，也请小伙伴们多提宝贵意见）
废话不多说，下面先是html部分：
<html>
<head>
<meta charset="UTF-8">
<title>基于jq的日历签到功能title>
<script src="js/jquery-3.2.1.js">script>
<div class="home">
<body>
<div class="home">
<h1 id="month">h1>
<table cellspacing="1" cellpadding="1" class="home">
<ul class="thead">
<li>日li>
<li>一li>
<li>二li>
<li>三li>
<li>四li>
<li>五li>
<li>六li>
ul>
<tbody id="tbody">tbody>
table>
<button id="button" style="float: left;">签到button>
<button id="button2" style="float: left;">签到天数button>
<button id="button3" style="float: left;">查询上月button>
<button id="button4" style="float: left;">返回button>
div>
body>这部分没有什么好说的，借了不知某位仁兄已经写好的生成日历的模板，我再加上4个button，为了实现自己的需求。
接着样式表走起：
* {
margin: 0;
padding: 0;
list-style: none;
}
.home {
width: 100%;
}
.thead {
width: 100%;
}
.thead li {
float: left;
width: 14.28%;
text-align: center;
}
.home tbody>tr>td {
width: 14.28%;
height: 40px;
background: #ececec;
text-align: center;
}
button{
width: 100px;
height: 40px;
font-size: 20px;
float: left;
}
#month {
text-align: center;
}
.qiandao {
color: red;
}
/*源文件中的样式基本没动，除了给我们添加的button写了样式*/虽说我们是h5页面，但是现在实现功能要紧，自适应什么的稍后再说。
最后就是js了：
//本地模拟已签到日期天数
var localDate = {
date: []
}
for(var j = 0; j < 30; j++) {
var a = Math.ceil(Math.random() * 11);
if(a < 10) {
a = "0" + a;
}
var b = Math.ceil(Math.random() * 30);
if(b < 10) {
b = "0" + b;
}
var c = a.toString() + b.toString();
localDate.date.push(c);
}
//初始化日期数据
var slidate = new Date();
var x = slidate.getMonth() + 1;
var n = slidate.getMonth();
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
var m = slidate.getMonth() + 1;
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
var conter = d.getDate(); //获取当前月的天数
var monthNum = "0" + (slidate.getMonth() + 1) + "月";
var monthCheck = (slidate.getMonth() + 1);
var y = slidate.getDate();
function initall() {
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
}
function dateHandler(monthFirst, d, conter, monthNum) {
var u = 1;
var blank = true;
var $tbody = $('#tbody'),
$month = $("#month"),
_nullnei = '';
var p = document.createElement("p");
var monthText = document.createTextNode(monthNum);
p.appendChild(monthText);
$month.append(p);
//遍历日历网格
for(var i = 1; i <= 6; i++) {
_nullnei += "";
for(var j = 1; j <= 7; j++) {
_nullnei += ' ";
}
$tbody.html(_nullnei);
//遍历网格内容
var $slitd = $tbody.find("td");
for(var i = 0; i < conter; i++) {
$slitd.eq(i + monthFirst).html(""
+ parseInt(i + 1) + "")
}
//给有日期的td加上id
var dayBlock = document.getElementsByTagName("td");
for(var i = 0; i < dayBlock.length; i++) {
if(dayBlock[i].textContent != "") {
dayBlock[i].setAttribute("id", "td" + u);
u++;
}
}
//若日期不足排满每一行的tr，则删除最后一个tr
var blankTr = document.getElementsByTagName("tr");
var blankTd = blankTr[5].getElementsByTagName("td");
for(var i = 0; i < blankTd.length; i++) {
if(blankTd[i].textContent != "") {
blank = false;
}
}
if(blank == true) {
blankTr[5].remove();
}
}
function checkDate(prep) {
var dateArray = [];
var newArray = [];
//删除不是本月的日期
for(var i = 0; i < localDate.date.length; i++) {
dateArray.push(localDate.date[i]);
}
for(var i = 0; i < dateArray.length; i++) {
if(dateArray[i].charAt(1) != prep) {
dateArray[i] = undefined;
}
}
for(var i = 0; i < dateArray.length; i++) {
if(dateArray[i] != undefined) {
newArray.push(dateArray[i]);
}
}
//遍历数组为已签到日期添加class
for(var i = 0; i < newArray.length; i++) {
if(newArray[i].charAt(2) == 0) {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td" + j;
$(checked).addClass("qiandao");
}
}
} else if(newArray[i].charAt(2) == 1) {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td1" + j;
$(checked).addClass("qiandao");
}
}
} else {
for(var j = 0; j < 10; j++) {
if(newArray[i].charAt(3) == j) {
var checked = "#td2" + j;
$(checked).addClass("qiandao");
}
}
}
}
}
//当天签到添加样式
$("#button").on("click", function() {
$("tr").remove();
$("p").remove();
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
var thisDay = "#td" + y;
var checkPic = false;
if(m > 10 && y < 10) {
var thisBlock = m.toString() + y.toString();
} else if(m < 10 && y > 10){
var thisBlock = "0" + m.toString() + y.toString();
}else if(m > 10 && y < 10){
var thisBlock = m.toString() + "0" + y.toString();
}else if(m < 10 && y < 10){
var thisBlock = "0" + m.toString() + "0" + y.toString();
}
for(var e = 0; e < localDate.date.length; e++) {
if(localDate.date[e] === thisBlock) {
checkPic = true;
}
}
if(checkPic == true) {
alert("您今天已经签到了！");
} else {
$(thisDay).addClass("qiandao");
alert("已签到！");
localDate.date.push(thisBlock);
}
})
//查询已签到天数
$("#button2").on("click", function() {
alert("您已经签到了" + localDate.date.length + "天！");
})
//查询历史记录
$("#button3").on("click", function() {
$("tr").remove();
$("p").remove();
if(m > 0 && n > 0) {
m--, n--;
}
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
var conter = d.getDate(); //获取当前月的天数
var monthNum = "0" + (m) + "月";
var monthCheck = m;
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
})
//返回上月记录
$("#button4").on("click", function() {
$("tr").remove();
$("p").remove();
if(m < x) {
m++, n++;
}
var monthFirst = new Date(slidate.getFullYear(), parseInt(n), 1).getDay(); //获取当月的1日等于星期几
var d = new Date(slidate.getFullYear(), parseInt(m), 0); //获取月
var conter = d.getDate(); //获取当前月的天数
var monthNum = "0" + (m) + "月";
var monthCheck = m;
dateHandler(monthFirst, d, conter, monthNum);
checkDate(monthCheck);
})
window.addEventListener("load", initall, false);感觉很多地方都是垃圾代码 - -
我们项目只走1个月，功能只需要实现当天签到就可以了，可是这一个月是跨月的（不是从某个月1号到30号or31号），所以我在构思的时候想到如果客户要求在第二个月要查上个月那部分的签到情况怎么办？？？把这个情况跟领导沟通了一下，虽然领导说这个功能是不需要有的，但是客户嘛，你们懂得~~~做出来就做出来吧，他们不用的话就当提升自己了。在写这个功能的时候又想到。。。。虽然这个项目是只要求查询两个月的，那万一以后要是会再用到呢？？？不如干脆做通用的吧。。。强迫症的我迫于“代码的通用性”的压力，不断的给自己添加新需求，成型之后功能如下（不过分依赖后台的前提下）：
- 当天签到（如已经签到过则不做任何响应）
- 给历史（包括今天）已经签到过的日期添加样式
- 可查询所有签到历史记录
- 可查询已签到天数
注：本人跟公司的后台大神沟通后规定返回的日期数据格式为[“0818”,”0819”,”0920”,”0921”],所以在Js中模拟随机生成30个日期数据供检测使用。