Use jquery to implement the daily check-in function

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 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 5 86 87 88 89 90

var calutil = {getdaysinmonth:function (imonth, iyear) {var dprevdate = new Date (iyear, imonth, 0); return dprevdate.ge Tdate (); }, Bulidcal:function (Iyear, imonth) {var amonth = new Array (); amonth[0] = new Array (7); amonth[1] = new Array (7); AMon TH[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] = "Day"; AMONTH[0][1] = "one"; AMONTH[0][2] = "two"; AMONTH[0][3] = "three"; AMONTH[0][4] = "four"; AMONTH[0][5] = "five"; AMONTH[0][6] = "six"; for (d = Idayoffirst D < 7; d++) {amonth[1][d] = ivardate; ivardate++;} for (w = 2; w < 7; w++) {for (d = 0; D & Lt 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 (); h Tmls.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 year April </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/

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 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 5 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> check-in effect </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} "; /* check-in Module Date capture:/function week () {var objdate= new date (); var week = Objdate.getday (); switch (week) {case 0:week= "Sunday"; Bre Ak Case 1:week= "Monday"; Break Case 2:week= "Tuesday"; Break Case 3:week= "Wednesday"; Break Case 4:week= "Thursday"; Break Case 5:week= "Friday"; Break Case 6:week= "Saturday"; Break $ ("#sing_for_number"). HTML (week); $ (function () {week (); var current = new Date (); $ ('. Singer_r_img '). Click (function () {var s = this; Showloading ("Signing in ...") ); $.ajax ({url: "${pagecontext.request.contextpath}/sign/dosign", type: "POST", DataType: "JSON", success:function (data {loadingcomplete (); var rst = Data.result; if (rst = 1) {ShowError ("Today you have signed in, no need to sign in again!") ", function () {var signlist = data.signlist; $ (s). addclass ("current"); var str = calutil.drawcal (Current.getfullyear (), Current.getmonTh () + 1,signlist); $ (str). Layermodel ({title: "Check-in Calendar"}); }); else {showsuccess ("check-in Successful! ", function () {var signlist = data.signlist; $ (s). addclass ("current"); var str = calutil.drawcal (Current.getfullyear (), current.getmonth () + 1,signlist); $ (str). Layermodel ({title: "Check-in Calendar"}); }); } } }); }); }); </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 "> Sign-in </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 The

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 signs Ervice Signservice;   @RequesTmapping ("/dosign") public Modelandview dosign (httpservletrequest request, httpservletresponse response) { Modelandview view = Super.createjsonview (); try {//First query has been signed Boolean ifhassigned = signservice.ifhassigned (); if (ifhassigned) {view.addobject ("result", "1");} els e {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 ());}

Demo diagram: