使用Jquery实现每日签到功能

 calendar.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

var calUtil = {
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("<div class='sign_main' id='sign_layer'>");
htmls.push("<div class='sign_succ_calendar_title'>");
// htmls.push("<div class='calendar_month_next'> </div>");
// htmls.push("<div class='calendar_month_prev'> </div>");
htmls.push("<div class='calendar_month_span'>2015年04月</div>");
htmls.push("</div>");
htmls.push("<div class='sign' id='sign_cal'>");
htmls.push("<table>");
htmls.push("<tr>");
htmls.push("<th>" + myMonth[0][0] + "</th>");
htmls.push("<th>" + myMonth[0][1] + "</th>");
htmls.push("<th>" + myMonth[0][2] + "</th>");
htmls.push("<th>" + myMonth[0][3] + "</th>");
htmls.push("<th>" + myMonth[0][4] + "</th>");
htmls.push("<th>" + myMonth[0][5] + "</th>");
htmls.push("<th>" + myMonth[0][6] + "</th>");
htmls.push("</tr>");
var d, w;
for (w = 1; w < 7; w++) {
htmls.push("<tr>");
for (d = 0; d < 7; d++) {
var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
console.log(ifHasSigned);
if(ifHasSigned){
htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
} else {
htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
}
}
htmls.push("</tr>");
}
htmls.push("</table>");
htmls.push("</div>");
htmls.push("</div>");
return htmls.join('');
}
};

sign.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.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: url(images/sign_have.gif) no-repeat center;}
.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;/**background-color: #FBFEFE;**/border-top:1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;display: none;}

sign.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>签到效果实现</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/sign/sign.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/sign/calendar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layerModel/jquery.layerModel.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/layerModel/layerModel.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/layerModel/layerModel.plugin.css"/>
<script type="text/javascript">
var ctx = "${pageContext.request.contextPath}";
/*签到模块日期捕捉：*/
function week(){
var objDate= new Date();
var week = objDate.getDay();
switch(week)
{
case 0:
week="周日";
break;
case 1:
week="周一";
break;
case 2:
week="周二";
break;
case 3:
week="周三";
break;
case 4:
week="周四";
break;
case 5:
week="周五";
break;
case 6:
week="周六";
break;
}
$("#sing_for_number").html( week );
}
$(function(){
week();
var current = new Date();
$(".singer_r_img").click(function(){
var s = this;
showLoading("正在签到...");
$.ajax({
url : "${pageContext.request.contextPath}/sign/doSign",
type : "POST",
dataType : "json",
success : function(data) {
loadingComplete();
var rst = data.result;
if(rst == 1) {
showError("今天您已经签到，无须再次签到！",function(){
var signList = data.signList;
$(s).addClass("current");
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
$(str).layerModel({title:"签到日历"});
});
} else {
showSuccess("签到成功！",function(){
var signList = data.signList;
$(s).addClass("current");
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
$(str).layerModel({title:"签到日历"});
});
}
}
});
});
});
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layerModel/jquery.layerModel.plugin.js"></script>
</head>
 
<body>
<a class="singer_r_img" href="###">
<span id="sing_for_number">签到</span>
</a>
</body>
</html>

SignController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

package com.controller;
 
import java.util.Date;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
import com.common.framework.controller.BaseController;
import com.common.util.RequestUtil;
import com.model.entity.SignEntity;
import com.model.service.SignService;
 
@Controller
@RequestMapping("/sign")
public class SignController extends BaseController {
@Autowired
private SignService signService;
 
@RequestMapping("/doSign")
public ModelAndView doSign(HttpServletRequest request, HttpServletResponse response) {
ModelAndView view = super.createJsonView();
try {
// 先查询是否已经签到
boolean ifHasSigned = signService.ifHasSigned();
if(ifHasSigned) {
view.addObject("result", "1");
} else {
SignEntity signEntity = new SignEntity();
Date signDate = new Date();
signEntity.setSignTime(signDate);
signEntity.setSignDay(Long.valueOf(signDate.getDate()));
signEntity.setSignIp(RequestUtil.getIpAddr(request));
signEntity.setSigner("zhoukun");
signService.signTX(signEntity);
view.addObject("result", "0");
}
List<SignEntity> signList = signService.listSign();
view.addObject("signList", signList);
} catch (Exception e) {
e.printStackTrace();
}
return view;
}
public static void main(String[] args) {
System.out.println(new Date().getDate());
}
}

演示图：

时间： 2024-08-30 18:19:45

使用Jquery实现每日签到功能的相关文章

使用Jquery实现每日签到功能_jquery

一直想做一个签到功能,但是百度了都没有自己想要的,所以就借着网上搜到的素材然后整合自己之前写的插件layerModel自己整合了一个,大家娱乐娱乐就好! calendar.js var calUtil = { getDaysInmonth : function(iMonth, iYear){ var dPrevDate = new Date(iYear, iMonth, 0); return dPrevDate.getDate(); }, bulidCal : function(iYear, i

基于jquery实现日历签到功能_jquery

在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

php实现签到功能每日日历显示

问题描述 php实现签到功能每日日历显示 利用mysql+php实现每日签到功能!能够在日历上显示出来已经签到的日子! 解决方案 做一张数据库表用了存储签到记录,加载本月的日历,jq异步显示已签到的日子(显示签到图标),其实不难,只要还是js多,想好逻辑,做好把功能理清了,再写代码.

JQuery实现带排序功能的权限选择实例

  本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 7

js/jQuery简单实现选项卡功能

 本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 第一种方法是用原生的js代码如下:    代码如下: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>简单选项卡</title>     <style type="text/css"

jquery禁用右键单击功能屏蔽F5刷新

 这篇文章主要介绍了jquery禁用右键单击功能屏蔽F5刷新的具体实现,需要的朋友可以参考下 1.禁用右键单击功能   代码如下: $(document).ready(function() {  $(document).bind("contextmenu",function(e) {  alert("sorry! No right-clicking!");  return false;  });  });    2.屏蔽F5刷新  复制代码$(document).r

如何实现微信签到功能？

问题描述 如何实现微信签到功能? 想用微信公众号做一个签到功能,不知道怎么实现,是需要第三方软件还是自身可以实现? 解决方案 可以自身实现,我们就做了个, 解决方案二: Android签到功能的实现iOS开发之仿微信小视频功能实现

JQuery实现带排序功能的权限选择实例_jquery

本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jqm缓存-jquery mobile 的缓存功能的作用

问题描述 jquery mobile 的缓存功能的作用 jquery mobile 的页面缓存功能有什么做用呢?能否做到js,css及图片的访问在关闭浏览器重新打开访问的缓存呢. 解决方案 这个是看你怎么在html中的header标签中定义资源过期时间的!