[JavaScript]Jquery + springMVC实现每日签到功能...

来源:本网整理

首先应该想到是不是url问题。如果你后台的类中没写@requestMapping,那么你的checkPassword的方法对应的页面应该是在根目录下的,而且它提交checkPassword。请在浏览器中看看你提交后的url是不是这样的..项目名/checkPassword,如果不是那么

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

scrolltotop.offset(100,120); scrolltotop.init();

[1].[文件] calendar.js ~ 3KB    (0) 跳至 [1] [2] [3] [4] [5]

111213 212223 313233 // tr:eq(0) 取第一行 td:eq(2) 取第三列 //$("tr:eq(0) td:eq(2)").text() 得到:13 //$("tr:eq(1) td:eq(1)").text() 得到:22 alert($("tr:eq(0) td:eq(2)").text()); 行和列你可以用变量代替! 请采纳,谢谢!

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'>&nbsp;</div>"); // htmls.push("<div class='calendar_month_prev'>&nbsp;</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] : "&nbsp;") + "</td>"); } else { htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : "&nbsp;") + "</td>"); } } htmls.push("</tr>"); } htmls.push("</table>"); htmls.push("</div>"); htmls.push("</div>"); return htmls.join(''); } };

[2].[文件] sign.css ~ 2KB    (0) 跳至 [1] [2] [3] [4] [5]

第一页的应该就是sql语句需要限制limit 1,10,这样就查询第一页的10条数据,关键在于你需要将页码和每一页查询的条数传给后台

.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;}

[3].[文件] sign.jsp ~ 3KB    (0) 跳至 [1] [2] [3] [4] [5]

csdn 下载的密码: 6diy

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

[4].[文件] SignController.java ~ 2KB    (0) 跳至 [1] [2] [3] [4] [5]

jQuery有直接的插入HTML的方法。jQuery.html(); 先用选择器选择要插入的对象,然后.html("你的html代码"); 例如: $("#yourid").html(""); 如果直接调用,可返回选择元素的html内容, var htmlTxt=$("#yourid").html();

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

[5].[图片] QQ图片20150402235858.png 跳至 [1] [2] [3] [4] [5]

SyntaxHighlighter.autoloader( 'applescript /js/sh309/scripts/shBrushAppleScript.js?t=1420773622000', 'actionscript3 as3 /js/sh309/scripts/shBrushAS3.js?t=1420773622000', 'bash shell /js/sh309/scripts/shBrushBash.js?t=1420773622000', 'coldfusion cf /js/sh309/scripts/shBrushColdFusion.js?t=1420773622000', 'cpp c /js/sh309/scripts/shBrushCpp.js?t=1420773622000', 'obj-c objc /js/sh309/scripts/shBrushObjC.js?t=1420773622000', 'c# c-sharp csharp /js/sh309/scripts/shBrushCSharp.js?t=1420773622000', 'css /js/sh309/scripts/shBrushCss.js?t=1420773622000', 'delphi pascal /js/sh309/scripts/shBrushDelphi.js?t=1420773622000', 'diff patch pas /js/sh309/scripts/shBrushDiff.js?t=1420773622000', 'erl erlang /js/sh309/scripts/shBrushErlang.js?t=1420773622000', 'groovy /js/sh309/scripts/shBrushGroovy.js?t=1420773622000', 'haxe hx /js/sh309/scripts/shBrushHaxe.js?t=1420773622000', 'java /js/sh309/scripts/shBrushJava.js?t=1420773622000', 'jfx javafx /js/sh309/scripts/shBrushJavaFX.js?t=1420773622000', 'js jscript javascript /js/sh309/scripts/shBrushJScript.js?t=1420773622000', 'perl pl /js/sh309/scripts/shBrushPerl.js?t=1420773622000', 'php /js/sh309/scripts/shBrushPhp.js?t=1420773622000', 'text plain /js/sh309/scripts/shBrushPlain.js?t=1420773622000', 'py python /js/sh309/scripts/shBrushPython.js?t=1420773622000', 'ruby rails ror rb /js/sh309/scripts/shBrushRuby.js?t=1420773622000', 'scala /js/sh309/scripts/shBrushScala.js?t=1420773622000', 'sql /js/sh309/scripts/shBrushSql.js?t=1420773622000', 'vb vbnet /js/sh309/scripts/shBrushVb.js?t=1420773622000', 'xml xhtml xslt html /js/sh309/scripts/shBrushXml.js?t=1420773622000' ); SyntaxHighlighter.all();

买车时千万不要选这些配置,那都是用来坑你钱的  由于换挡拨片经常出现在一些跑车上,所以很多没用过这个拨片的车迷在买车时都想有个换挡拨片,用来提升驾驶乐趣以及偶尔能装X。殊不知,这个拨片在日常用起来是比较累的,很多车主,包括轱辘哥我自己在内,驾驶有换挡拨片的汽车时,通常在使用了一下子之后,就一直用D挡开车了,甚至S挡都懒得用,因为这用起来一点都不舒服,而我们买个自动挡车不就是想图个轻松吗!  大灯清洗装置就是大灯下面有一个可伸缩的喷头,把玻璃水喷到灯罩上进行冲刷,它的目的就是不让积雪或泥土挡住车辆的灯光。而对大多数人来说,生活的城市不会常年大雪,也没人会整天把车拿到泥地里去豁。所以对很多人来说,

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

急求JQuery+springMVC+spring+mybatis增改示例!谢谢

基于maven的SpringMVC+spring+MyBatis 基本框架。你可以参考下。追问不好意思 我公司不能上外网,所以您的包我下不下来

为什么springmvc导入不了jquery资源文件

方法1. 修改web.xml文件,增加对静态资源的url映射,要加在org.springframework.web.servlet.DispatcherServlet的前面

如:

<servlet-mapping>

<servlet-name>default</servlet-name>

<url-pattern>*.js</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>default</servlet-name>

<url-pattern>*.css</url-pattern>

</servlet-mapping>

在web.xml中添加好配置后,在jsp页面就可以引用这些静态资源了

<script type="text/javascript" src="static/js/1.js"></script>

这里还需要说明的是:这种方法不能访问WEB-INF目录下的静态资源,也就是js目录必须是web根(可能是webapp,webContent等)目录下,否则是不能引用的;

如果放在WEB-INF目录下,即使你使用<c:url value=“/WEB-INF/js/jquery.js”>也是会出现404错误的。

百度时发现:以下各容器的default servlet名字,而且还提到静态资源servlet映射需要写在dispatcherServlet的前面;我在Jboss-eap-5.1中测试过,前后没有关系;所以可能是容器或者版本的关系吧。

Tomcat, Jetty, JBoss, and GlassFish 默认 Servlet的名字 -- "default"

Google App Engine 默认 Servlet的名字 -- "_ah_default"

Resin 默认 Servlet的名字 -- "resin-file"

WebLogic 默认 Servlet的名字 -- "FileServlet"

WebSphere 默认 Servlet的名字 -- "SimpleFileServlet"

方法2.在相应的 -servlet.xml中添加spring配置<mvc:default-serlvet-handler>

如:

<mvc:default-servlet-handler/>

这种方法只需要添加一行代码,在jsp页面中引用时和方法1一样,同样也不能引用WEB-INF下的资源。

方法3.使用spring 3.0.4的新特性,在相应的 -servlet.xml中添加配置<mvc:resource>

如:

3.1 <mvc:resources location="/js/" mapping="/js/**" />

3.2 <mvc:resources location="/WEB-INF/js/" mapping="/js/**" />

这种方法我写了两个配置,不同的地方只是location的值,一个是“/js/”,一个是“/WEB-INF/js/”;两种都可以,根据你自己的目录结构来引用。这就说明使用这种方式可以引用WEB-INF目录下的静态资源;这里的mapping属性的值用了ant的通配符方式,"/js/**"(两个"*")指location的值所表示的目录以及所有子目录;但是在jsp页面中引用时需要注意:

方法4 直接在web.xml中设置spring mvc的过滤路径

<servlet-name>spring-mvc</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<load-on-startup>1</load-on-startup><!-- 大于等于0启动时加载此框架 -->

</servlet>

<servlet-mapping>

<servlet-name>spring-mvc</servlet-name>

<url-pattern>*.do</url-pattern>

</servlet-mapping>

使用JavaScript或jquery实现动态交互效果: 点击登录和注册时,可以完成登录和注册tab的切换

jQuery+easyui自带验证。挺好用

spring mvc怎么导入js

把js文件拷贝到你的项目的相应位置,页面引用即可。

javascript框架jQuery如何实现这样的功能?

//为什么一定要用jquery呢,原生的js就可以简单实现了

var kv = function (key,value) {

    if (!window[key]) {

    window[key] = [];

    window[key].push(value);

    }

    else{

    window[key].push(value);

    }

};

[{id:'a',value:1},{id:'a',value:2},{id:'a',value:3},{id:'b',value:1},{id:'b',value:2}].map(function(a){

kv(a['id'],a['value']);

});

console.log(a);//[1,2,3]

console.log(b);//[1,2]

  • 本文相关:
  • [JavaScript]仿实例化类的Javascript代码实现
  • [C/C++]最大子数组
  • [C/C++]动态规划解决钢条切割问题
  • [C/C++]矩阵链相乘
  • [C/C++]汽车行驶驱动力和行驶阻力平衡计算
  • [C/C++]判断素数,伪素数也认为是素数。
  • [C#]socket服务端连接多客户端
  • [Java]将数字转换成人民币大写
  • [C/C++]用c进行简单的postgresql操作
  • [Flash/ActionScript/Flex]用Flex 模拟 Mac OS X 下的QQ登录界面...
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved