js php 实现日历签到_Js 实现每日签到打卡轨迹功能。
1.0 核心文件 calendar.js
var calUtil = {
//当前日历显示的年份
showYear:2018,
//当前日历显示的月份
showMonth:1,
//当前日历显示的天数
showDays:1,
eventName:"load",
//初始化日历
init:function(signList){
calUtil.setMonthAndDay();
calUtil.draw(signList);
},
draw:function(signList){
//绑定日历
var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
$("#calendar").html(str);
//绑定日历表头
var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";
$(".calendar_month_span").html(calendarName);
},
//获取当前选择的年月
setMonthAndDay:function(){
switch(calUtil.eventName)
{
case "load":
var current = new Date();
calUtil.showYear=current.getFullYear();
calUtil.showMonth=current.getMonth() + 1;
break;
case "prev":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)-1;
if(calUtil.showMonth==0)
{
calUtil.showMonth=12;
calUtil.showYear-=1;
}
break;
case "next":
var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
calUtil.showMonth=parseInt(nowMonth)+1;
if(calUtil.showMonth==13)
{
calUtil.showMonth=1;
calUtil.showYear+=1;
}
break;
}
},
getDaysInmonth : function(iMonth, iYear){
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
},
bulidCal : function(iYear, iMonth) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth - 1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
var iVarDate = 1;
var d, w;
aMonth[0][0] = "日";
aMonth[0][1] = "一";
aMonth[0][2] = "二";
aMonth[0][3] = "三";
aMonth[0][4] = "四";
aMonth[0][5] = "五";
aMonth[0][6] = "六";
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
},
ifHasSigned : function(signList,day){
var signed = false;
$.each(signList,function(index,item){
if(item.signDay == day) {
signed = true;
return false;
}
});
return signed ;
},
drawCal : function(iYear, iMonth ,signList) {
var myMonth = calUtil.bulidCal(iYear, iMonth);
var htmls = new Array();
htmls.push("
htmls.push("
htmls.push("
htmls.push("
");
htmls.push("
htmls.push("
var d, w;
for (w = 1; w < 7; w++) {
htmls.push("
");
for (d = 0; d < 7; d++) {
var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
console.log(ifHasSigned);
if(ifHasSigned){
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");
} else {
htmls.push("
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "");
}
}
htmls.push("
");
}
htmls.push("
");
htmls.push("
");
htmls.push("
");
return htmls.join('');
}
};
2.0 页面Js引入
3.0 后台拉取会员已经签到的打卡轨迹,填充到表格中去。
var signList=[{"signDay":"23"},{"signDay":"24"},{"signDay":"25"},{"signDay":"26"},{"signDay":"30"}];
//填充到日历表格中
calUtil.init(signList);
4.0 效果图
js php 实现日历签到_Js 实现每日签到打卡轨迹功能。相关推荐
- js php 实现日历签到_js实现每日签到功能
本文实例为大家分享了js实现每日签到功能的具体代码,供大家参考,具体内容如下 js: var calUtil = { getDaysInmonth : function(iMonth, iYear){ ...
- 前端捕捉轨迹_基于JavaScript实现每日签到打卡轨迹功能
本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下 1. 核心文件 calendar.js var calUtil = { //当前日历显示的年份 showYear: ...
- html5 签到系统功能,项目实战之基于JavaScript实现每日签到打卡轨迹功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于js实现每日签到打卡轨迹功能的具体代码,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. 1.核心文件calendar.js var c ...
- html实现日历签到页面,jquery每日签到日历插件
这是一款使用jquery来实现的每日签到日历插件源代码.该每日签到插件可以实现签到功能,查看签到次数等,非常实用. 使用方法 在页面中引入样式文件style.css,jquery.min.js和签到j ...
- Js 实现每日签到打卡轨迹功能。
1.0 核心文件 calendar.js var calUtil = {//当前日历显示的年份showYear:2018,//当前日历显示的月份showMonth:1,//当前日历显示的天数showD ...
- js模仿f11全屏_JS实现全屏预览F11功能的示例代码
老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我? 少废话,直接上 ...
- CSDN是怎么实现用户签到,统计签到次数,连续签到天数等功能微服务的
文章目录 需求分析 设计思路 用户签到和统计连续签到的次数 签到控制层 SignController 签到业务逻辑层 SignService 测试 按月统计用户签到的次数 签到控制层 SignCont ...
- 基于jQuery的日历+每日签到功能
公司要开发一个h5页面,里边有一个每日签到抽奖的功能,本以为这样的插件应该会有很多,结果找到的全都是仅生成日历的插件,于是乎就出现了下面这个东西.(前端菜鸟,请大神嘴下留情,也请小伙伴们多提宝贵意见) ...
- 日历签到 java_微信小程序签到 日历 每日签到积分加1
signIn.json { "navigationBarTitleText": "签到", "usingComponents": { } } ...
最新文章
- Dynamics CRM 导入导出数据
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
- 获取http请求标头_HTTP请求和标头参数的CDI拦截器–简单示例
- binlog日志_MySQL三大日志binlog、redo log和undo log
- ShadeGraph教程之节点详解7:Utility Nodes
- SpringBoot通过配置文件自动加载到map中
- matlab的save函数用法
- IDEA配置-无法读取src/java/main下hbm.xml等资源文件
- SparkSQL案例-图书信息分析
- 数据中心风侧直接自然冷却节能潜力分析
- FireMonkey v1.1的WinSoft WinRT-10.3-SEO-狼术
- 基于Hive数据仓库的标签画像实战
- 【教程】使用腾讯云轻量应用服务器搭建Jitsi Meet视频会议系统,轻松召开私域视频会议!
- 如何在zencart里实现多标签标签云效果
- 因违反《竞业协议》,三年白忙活了!赔偿 97.6 万元,返还 15.8 万元
- Java用于取得当前日期相对应的月初,月末,季初,季末,年初,年末时间
- 全球与中国太阳能测试仪市场现状及未来发展趋势
- [zz]QuickTime电影(Movie)
- 巧用PaperPass自建库免费检测提高降重效率
- element 走马灯实现图片轮播
热门文章
- NC:港大张彤团队-基于组学的耐药基因风险评估框架
- 你知道R中的赋值符号箭头(-)和等号(=)的区别吗?
- 岛国科普第2弹-再造人类生命的神奇细胞Human.Life.Our.Amazing.Cell
- Python使用matplotlib绘制数据去重前后的柱状图对比图(在同一个图中显示去重操作之后同一数据集的变化情况)
- 从FASTQ到BAM经历了什么?
- 更改Ubuntu gcc、g++默认编译器版本
- 无法显示验证码去掉html,后台登陆验证码无法显示
- 中兴视讯服务器 广州,中兴高清视讯服务器ZXV10 M900
- 计算机应用基础上机操作,计算机应用基础上机操作试题
- android中仿qq最新版抽屉,Android实现3种侧滑效果(仿qq侧滑、抽屉侧滑、普通侧滑)...