基于jQuery的日历+每日签到功能
2017-06-17 20:45
453 查看
公司要开发一个h5页面，里边有一个每日签到抽奖的功能，本以为这样的插件应该会有很多，结果找到的全都是仅生成日历的插件，于是乎就出现了下面这个东西。（前端菜鸟，请大神嘴下留情，也请小伙伴们多提宝贵意见）
废话不多说，下面先是html部分：
这部分没有什么好说的，借了不知某位仁兄已经写好的生成日历的模板，我再加上4个button，为了实现自己的需求。
接着样式表走起：
虽说我们是h5页面，但是现在实现功能要紧，自适应什么的稍后再说。
最后就是js了：
感觉很多地方都是垃圾代码 - -
我们项目只走1个月，功能只需要实现当天签到就可以了，可是这一个月是跨月的（不是从某个月1号到30号or31号），所以我在构思的时候想到如果客户要求在第二个月要查上个月那部分的签到情况怎么办？？？把这个情况跟领导沟通了一下，虽然领导说这个功能是不需要有的，但是客户嘛，你们懂得~~~做出来就做出来吧，他们不用的话就当提升自己了。在写这个功能的时候又想到。。。。虽然这个项目是只要求查询两个月的，那万一以后要是会再用到呢？？？不如干脆做通用的吧。。。强迫症的我迫于“代码的通用性”的压力，不断的给自己添加新需求，成型之后功能如下（不过分依赖后台的前提下）：
当天签到（如已经签到过则不做任何响应）
给历史（包括今天）已经签到过的日期添加样式
可查询所有签到历史记录
可查询已签到天数
注：本人跟公司的后台大神沟通后规定返回的日期数据格式为[“0818”,”0819”,”0920”,”0921”],所以在Js中模拟随机生成30个日期数据供检测使用。
废话不多说，下面先是html部分：
<!DOCTYPE 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> 4000 <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 += "<tr>";
for(var j = 1; j <= 7; j++) {
_nullnei += '<td></td>';
}
_nullnei += "</tr>";
}
$tbody.html(_nullnei);
//遍历网格内容
var $slitd = $tbody.find("td");
for(var i = 0; i < conter; i++) {
$slitd.eq(i + monthFirst).html("<p>" + parseInt(i + 1) + "</p>")
}
//给有日期的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 < <
be94
span class="hljs-number">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个日期数据供检测使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于jquery实现日历签到功能
- 基于jquery实现日历签到功能
- 基于jquery实现日历签到功能
- jquery+spring实现每日签到功能
- 使用Jquery实现每日签到功能
- php+mysql+jquery实现日历签到功能
- jQuery日历签到每日签到网页特效
- 贴一段基于jquery实现的倒计时功能的函数
- 基于jQuery插件imgAreaSelect和ArcGIS server模仿实现百度地图的截图功能
- [小功能]通过日历查看每日头条
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- ajaxMutiUpload基于jQuery的多文件上传功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 基于jquery的一个简单拖拽功能
- 基于jQuery的让textarea支持Ctrl+Z步步撤销功能
- 基于jquery循环map功能的代码
- 基于jQuery的ajax功能实现web service的json转化(终极篇)
- JQuery实现基于Ajax的数据查询、排序和分页功能
- EasySlider 基于jQuery功能强大简单易用的滑动门插件