js php 实现日历签到_基于jquery实现日历签到功能_jquery
在一些任务游戏、贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演。
本文实例讲述了基于jquery实现日历签到功能。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
index.html
签到效果实现
sign.css
.singer_r_img{display:block;width:114px;height:52px;line-height:45px;background:url(images/sing_week.gif) right 2px no-repeat;vertical-align:middle;*margin-bottom:-10px;text-decoration:none;}
.singer_r_img:hover{background-position:right -53px;text-decoration:none;}
.singer_r_img span{margin-left:14px;font-size:16px;font-family:'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;font-weight:700;color:#165379;}
.singer_r_img.current{background:url(images/sing_sing.gif) no-repeat 0 2px;border:0;text-decoration:none;}
.sign table{border-collapse: collapse;border-spacing: 0;width:100%;}
.sign th,.sign td {width: 30px;height: 40px;text-align: center;line-height: 40px;border:1px solid #e3e3e3;}
.sign th {font-size: 16px;}
.sign td {color: #404040;vertical-align: middle;}
.sign .on {background-color:red;}
.calendar_month_next,.calendar_month_prev{width: 34px;height: 40px;cursor: pointer;background:url(images/sign_arrow.png) no-repeat;}
.calendar_month_next {float: right;background-position:-42px -6px;}
.calendar_month_span {display: inline;line-height: 40px;font-size: 16px;color: #656565;letter-spacing: 2px;font-weight: bold;}
.calendar_month_prev {float: left;background-position:-5px -6px;}
.sign_succ_calendar_title {text-align: center;width:398px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;background:#fff;}
.sign_main {width: 400px;border-top:1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;}
calendar.js
var calUtil = {
//当前日历显示的年份
showYear:2015,
//当前日历显示的月份
showMonth:1,
//当前日历显示的天数
showDays:1,
eventName:"load",
//初始化日历
init:function(signList){
calUtil.setMonthAndDay();
calUtil.draw(signList);
calUtil.bindEnvent();
},
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);
},
//绑定事件
bindEnvent:function(){
//绑定上个月事件
$(".calendar_month_prev").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="prev";
calUtil.init(signList);
});
//绑定下个月事件
$(".calendar_month_next").click(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
calUtil.eventName="next";
calUtil.init(signList);
});
},
//获取当前选择的年月
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("");
htmls.push("
");
htmls.push("");
htmls.push("
");
htmls.push("" + myMonth[0][0] + "");
htmls.push("" + myMonth[0][1] + "");
htmls.push("" + myMonth[0][2] + "");
htmls.push("" + myMonth[0][3] + "");
htmls.push("" + myMonth[0][4] + "");
htmls.push("" + myMonth[0][5] + "");
htmls.push("" + myMonth[0][6] + "");
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('');
}
};
希望本文所述对大家学习javascript程序设计有所帮助。
js php 实现日历签到_基于jquery实现日历签到功能_jquery相关推荐
- java 日历签到功能_基于jquery实现日历签到功能
使用Jquery实现每日签到功能 基于jquery实现日历签到功能 jquery记事日历插件e-calendar 思路:1.获取当月第一天是周几2.获取当月共几天 通过获取下月的第0天,即是当月最后一 ...
- js微信抢红包脚本代码_基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. 0){ let num = scramble(remainAmount,remainPeople); remainAmount = remainAm ...
- 日历签到 mysql_php+mysql+jquery实现日历签到功能的方法
本文主要介绍了php+mysql+jquery实现日历签到功能的过程与步骤,具有很好的参考价值 在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到 ...
- 基于jQuery的日历+每日签到功能
公司要开发一个h5页面,里边有一个每日签到抽奖的功能,本以为这样的插件应该会有很多,结果找到的全都是仅生成日历的插件,于是乎就出现了下面这个东西.(前端菜鸟,请大神嘴下留情,也请小伙伴们多提宝贵意见) ...
- php mysql js弹出登陆小窗口_基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery...
具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html jquery点 ...
- 每日签到html特效,jQuery实现日历每日签到网页特效
本文主要和大家分享jQuery实现日历每日签到网页特效,主要以代码的形式和大家分享,希望能帮助到大家. index.html 代码: jQuery简洁的日历签到插件 $(function(){ //a ...
- 座位选座的java代码_基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
- jquery字体颜色_基于jquery实现的web版excel
基于jquery实现的web版excel.包含excel的基本功能 支持合并单元格,拆分单元格 支持插入单元格,删除单元格 支持整行整列选择单元格 自定义右键菜单,可以设置单元格数量 支持鼠标左键拖动 ...
- jquery实现上下左右键盘监听_基于 jQuery 实现键盘事件监听控件
最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回.重做.移动.缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点. 1. ...
最新文章
- 怪异的StackOverflowException异常
- android app 历史版本,怎么找到App的所有历史版本,以及每次改版的变更点呢?
- BADI 修改采购订单的shipping point示例
- 浙江省第二届大学生网络与信息安全竞赛在线预赛
- 在SAP Smart Business workspace里创建KPI tile的错误消息
- layui 鼠标移入变为小手_游戏技术上不去?看看外设选对没!鼠标篇
- 用AI写出的第一本书面世:先进算法能对机器生成的内容负责吗?
- .net大型分布式电子商务架构说明(转载来自头条)
- WCF学习之旅—WCF概述(四)
- 二叉搜索树判定方法(c++实现)
- PyTorch 1.8 发布,支持 AMD,优化大规模训练
- UVA1368 UVALive3602 ZOJ3132 DNA Consensus String【贪心】
- Using mysqldump for Backups(备份还原数据库实例及参数详细说明)
- 凸优化第六章逼近与拟合 6.3 正则化逼近
- 【转】卡巴斯基2011导入key专用工具+卡巴斯基提取key工具(激活码转换key)
- iOs LightBlue与cc2540 BLE开发板之间的通信实验 [原创, 多图]
- 解决:samba 无法访问,您可能没有权限使用网络资源,请与这台服务器管理员联系 指定的网络名不可用
- 【C++】字符串子串的系列问题
- 为什么量子计算机比经典计算机更强大,最新从实验层面证明:量子计算,确实比经典计算更具优势!...
- laravel 发送邮件随记
热门文章
- 卸载java 1.8,Linux安装卸载jdk1.8
- vue-pdf 在线预览pdf(pdf地址或base64pdf)解决电子签章显示问题
- 计算机网络谢希仁第七版笔记(未完待续)
- Android面试官:想进大厂先把基础打牢了再说!网络知识十二问你都答得出来吗?
- hive不起用mapreduce
- 什么能力很重要?绝大多数人没有——点线面体思考法
- 802.1ag CFM/802.3ah EFM OAM/Y.1731 ETH OAM学习笔记
- 论文阅读(4.10):基于物联网的教育资产管理系统设计与实现
- 2901-View-Gallery
- elasticsearch修改字段类型