前端捕捉轨迹_基于JavaScript实现每日签到打卡轨迹功能
本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下
1. 核心文件 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. 页面Js引入
3.0 后台拉取会员已经签到的打卡轨迹,填充到表格中去。
var signList=[{"signDay":"23"},{"signDay":"24"},{"signDay":"25"},{"signDay":"26"},{"signDay":"30"}];
//填充到日历表格中
calUtil.init(signList);
4. 效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
前端捕捉轨迹_基于JavaScript实现每日签到打卡轨迹功能相关推荐
- html5 签到系统功能,项目实战之基于JavaScript实现每日签到打卡轨迹功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于js实现每日签到打卡轨迹功能的具体代码,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. 1.核心文件calendar.js var c ...
- js php 实现日历签到_Js 实现每日签到打卡轨迹功能。
1.0 核心文件 calendar.js var calUtil = { //当前日历显示的年份 showYear:2018, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 ...
- Js 实现每日签到打卡轨迹功能。
1.0 核心文件 calendar.js var calUtil = {//当前日历显示的年份showYear:2018,//当前日历显示的月份showMonth:1,//当前日历显示的天数showD ...
- 基于微信小程序的每日签到打卡
社会的发展和科学技术的进步,互联网技术越来越受欢迎.手机也逐渐受到广大人民群众的喜爱,也逐渐进入了每个用户的使用.手机具有便利性,速度快,效率高,成本低等优点. 因此,构建符合自己要求的操作系统是非常 ...
- PHP 基于ThinkPHP实现每日签到及奖励功能
PHP 基于ThinkPHP实现每日签到及奖励功能 数据库设计 代码实现 数据库设计 要求: 每个用户可以签到7天,连续签到7天或者中途断签都重新开始计算签到天数,签到会获取对应奖励 分析: 1.连续 ...
- [附源码]计算机毕业设计Python+uniapp每日签到打卡小程序gyrj5(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp每日签到打卡小程序gyrj5(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程 项目运行环境配置: Python ...
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- javascript官方文档_基于Javascript编写的开源Markdown和HTML相互转换器——showdown
介绍 showdown是一个基于Javascript编写的开源Markdown和HTML相互转换器,showdown可以用在客户端(浏览器)或者服务端(nodejs).shodown还支持原始规范中未 ...
- jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表 本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
最新文章
- Microsoft Visual C++ Compiler for Python
- 成功解决SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame See
- 【转载】zookeeper学习
- html5怎么改变submit样式,html5中submit是按钮么
- iOS开发网络篇—搭建本地服务器
- Python模块之MyQR——制作个性化动态二维码(超详细)
- python下载谷歌地图瓦片_python获取bing地图发布自己的TMS服务(一)下载瓦片
- 【Java从0到架构师】项目实战 - 前后端分离、后端校验、Swagger、全局异常处理
- YbSoftwareFactory 代码生成插件【八】:基于JQuery EasyUI、Web Api的 ASP.NET MVC 代码生成插件...
- [附源码]Java计算机毕业设计SSM宠物管理系统
- rs485接收中断函数使能_RS485通讯几种常见问题
- HTML给表格写个标题居中,如何将表格中的各个标题居中?
- python基础练习题:纳特拼音alaphabeta【难度:1级】--景越Python编程实例训练营,不同难度Python习题,适合自学Python的新手进阶
- 教你一步解决添加和修改环境变量问题
- STM32debug模式下可以执行,但是不能单步调试和跳转
- 今天的学生要做汤饭吗
- [系统安全] 虚拟化安全之虚拟化概述
- 电脑文件夹备份到百度网盘,可以实现自动备份
- Ubuntu18.04录屏并生成gif图片
- 自动缩放文字的TextView
热门文章
- Android学习笔记(二)基础知识(1)
- 《数学与泛型编程:高效编程的奥秘》一1.4 各章概述
- 自己总结的前端面试题
- C# 之 提高WebService性能大数据量网络传输处理
- node.js用get方式获取网页中的链接
- IPC——流套接字通信
- Composer fails to download http json files on update, not a network issue, https fine
- golang 学习记录
- 让你的php命令行程序处理管道数据
- js 浅拷贝直接赋值_JS中的赋值、浅拷贝与深拷贝