使用Jquery实现每日签到功能

前端技术 2023/09/05 JavaScript

一直想做一个签到功能，但是百度了都没有自己想要的，所以就借着网上搜到的素材然后整合自己之前写的插件layerModel自己整合了一个，大家娱乐娱乐就好！

calendar.js

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

.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

<%@ 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

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());
  }
}

演示图：

 

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/13423

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案