web页面时间模拟控件 -

ch_dj

浏览: 458651 次
性别:
来自: 厦门

最近访客更多访客>>

libing19850706

冷月宫主

xiaohuih1985

langgufu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

web页面时间模拟控件

博客分类：

Web前端

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basepath" value="<%=request.getContextPath()%>" />
<!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=gb2312" />
<link rel="stylesheet" type="text/css" href="${basepath }/images/xmrb_style.css"/>
<script src="${basepath }/common/js/base/jquery.min.js"></script>
<title>图片滚动</title>
</head>
<body>
<div class="tit_ej_xmzl_s mar_t20 t16  f_yahei twhite1">
                	<ul>
                    	<li>
                        	<div id="cate">
    							<div class="cate_wrp" id="drop_year">
     								 <div class="cate_inp cate_tri">
     								 <c:if test="${sYear==null || sYear==''}">按年份显示</c:if>
     								 <c:if test="${sYear!=null && sYear!='' }">${sYear}年</c:if>
     								 </div>
      								 <a href="javascript:" class="cate_tri"></a> 
                                </div>
                                <input name="sYear" id="sYear" value="${sYear }"  type="hidden"/>
    							<div class="cate_drop" style="display:none" >
      								<ul>
                                    	<li>按年份显示</li>
                                    	<%
                                    	int year =2016;
                                    	for(int i=year-5;i<=year;i++){ %>
        								<li><%=i %>年</li>
        								<%} %>
     							    </ul>
                                    <div class="clear"></div>
    							</div>
 							 </div>
                        	</li>
                            <script type="text/javascript">
   							 // 下拉列表js
    						(function($) {
     							 var $cate = $('#cate'),
        						 $tri = $('.cate_tri', $cate),
       							 $drop = $('div.cate_drop', $cate),
        						 $inp = $('div.cate_inp', $cate);
        						 $tri.on('click', function(event) {
           		 				 var $el = $(this);
            					 if( $el.data('active') !== 'on' ) {
              					 $drop[0].style.display = 'block';
             					 $el.data('active', 'on');
           							 } else {
             							 $drop[0].style.display = 'none';
              							 $el.data('active', 'off')
          								}
      								  });

       							 $drop.on('mouseover', 'li', function(event) {
        						  $inp[0].innerHTML = this.innerHTML; 
       							 }).on('click', 'li', function(event) {
       								if('按年'!=this.innerHTML.substr(0,2)){
       									$('#sYear').val(this.innerHTML.substr(0,4))
              						 }else{
              							$('#sYear').val('');
              						 }
         							 var year = $("#sYear").val();
               						 var mon = $("#sMonth").val();
               						 if(year!="" && mon!=""){
               							 var maxDay = getDaysInMonth(mon,year);
               							 if(maxDay==28){
               								 $("#d29").hide();$("#d30").hide();$("#d31").hide();
               							 }else if(maxDay==29){
               								$("#d30").hide();$("#d31").hide();$("#d29").show();
               							 }else if(maxDay==30){
               								$("#d31").hide();$("#d29").show();$("#d30").show();
               							 }
               							 
               						 }
         						 $drop[0].style.display = 'none';
        						  $tri.data('active', 'off');
       								 });
       							function getDaysInMonth(month,year){
               					  var days;
               					  if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
               					  else if (month==4 || month==6 || month==9 || month==11) days=30;
               					  else if (month==2) {
               					  if (isLeapYear(year)) { days=29; }
               					  else { days=28; }
               					  }
               					  return (days);
               					}
               				  
               				  function isLeapYear(year) 
               				  { 
      	         				  if((year%4==0&&year%100!=0)||(year%400==0)) 
      	         				  { 
      	         				  	return true; 
      	         				  }  
               				 	 return false; 
               				  }
   								 }(jQuery));
   							 </script>
                            <li>
                        	<div id="cate1">
    							<div class="cate_wrp1">
     								 <div class="cate_inp1 cate_tri1">
     								 <c:if test="${sMonth==null  || sMonth==''}"> 按月份显示</c:if>
     								 <c:if test="${sMonth!=null && sMonth!='' }">${sMonth}月</c:if> 
     								</div>
      								 <a href="javascript:" class="cate_tri1"></a> 
                                </div>
                                 <input name="sMonth" id="sMonth"  value="${sMonth }" type="hidden"/>
    							<div class="cate_drop1" style="display:none;height: 400px;overflow-y: scroll;overflow-x:hidden;" >
      								<ul>
                                    	<li>按月份显示</li>
        								<li>01月</li>
        								<li>02月</li>
        								<li>03月</li>
        								<li>04月</li>
                                        <li>05月</li>
        								<li>06月</li>
        								<li>07月</li>
        								<li>08月</li>
                                        <li>09月</li>
        								<li>10月</li>
        								<li>11月</li>
        								<li>12月</li>
     							    </ul>
                                    <div class="clear"></div>
    							</div>
 							 </div>
                        </li>
               			
						<script type="text/javascript">
  						  // 下拉列表js
   						 (function($) {
     						 var $cate = $('#cate1'),
       						 $tri = $('.cate_tri1', $cate),
      						 $drop = $('div.cate_drop1', $cate),
       						 $inp = $('div.cate_inp1', $cate);

        					$tri.on('click', function(event) {
           					 var $el = $(this);
           					 if( $el.data('active') !== 'on' ) {
           					   $drop[0].style.display = 'block';
            				  $el.data('active', 'on');
           						 } else {
            				  $drop[0].style.display = 'none';
            				  $el.data('active', 'off')
           						 }
       						 });

       					 $drop.on('mouseover', 'li', function(event) {
        				  $inp[0].innerHTML = this.innerHTML; 
       					 }).on('click', 'li', function(event) {
       						 if('按月'!=this.innerHTML.substr(0,2)){
       							 $('#sMonth').val(this.innerHTML.substr(0,2));
       						 }else{
       							$('#sMonth').val('');
       						 }
       						 var year = $("#sYear").val();
       						 var mon = $("#sMonth").val();
       						 if(year!="" && mon!=""){
       							 var maxDay = getDaysInMonth(mon,year);
       							 if(maxDay==28){
       								 $("#d29").hide();$("#d30").hide();$("#d31").hide();
       							 }else if(maxDay==29){
       								$("#d30").hide();$("#d31").hide();$("#d29").show();
       							 }else if(maxDay==30){
       								$("#d31").hide();$("#d29").show();$("#d30").show();
       							 }
       							 
       						 }
        				  $drop[0].style.display = 'none';
         				 $tri.data('active', 'off');
       						 });
       					 
       						function getDaysInMonth(month,year){
         					  var days;
         					  if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
         					  else if (month==4 || month==6 || month==9 || month==11) days=30;
         					  else if (month==2) {
         					  if (isLeapYear(year)) { days=29; }
         					  else { days=28; }
         					  }
         					  return (days);
         					}
         				  
         				  function isLeapYear(year) 
         				  { 
	         				  if((year%4==0&&year%100!=0)||(year%400==0)) 
	         				  { 
	         				  	return true; 
	         				  }  
         				 	 return false; 
         				  }
   						 }(jQuery));
  						  </script>
                          
                           <li>
                        	<div id="cate2">
    							<div class="cate_wrp2">
     								 <div class="cate_inp2 cate_tri2">
     								 <c:if test="${sDay==null || sDay=='' }">按日期显示</c:if>
     								 <c:if test="${sDay!=null && sDay!='' }">${sDay}号</c:if>  
     								</div>
      								 <a href="javascript:" class="cate_tri2"></a> 
                                </div>
                                 <input name="sDay" id="sDay" value="${sDay }" type="hidden"/>
    							<div class="cate_drop2" style="display:none;height: 400px;overflow-y: scroll;overflow-x:hidden;" >
      								<ul id="drop_day">
                                    	<li>按日期显示</li>
                                    	<%for(int i=1;i<=9;i++){ %>
        								<li>0<%=i %>号</li>
        								<%}
                                    	for(int j=10;j<=28;j++){%>
        								<li><%=j %>号</li>
        								<%} %>
        								<li id="d29">29号</li>
        								<li id="d30">30号</li>
        								<li id="d31">31号</li>
     							    </ul>
                                    <div class="clear"></div>
    							</div>
 							 </div>
                        </li>
               			
						<script type="text/javascript">
  						  // 下拉列表js
   						 (function($) {
   							 if("${sMonth}"!="" && "${sYear}"!=""){
   								 var month = "${sMonth}"!=""?"${sMonth}":0;
   								 var year = "${sYear}"!=""?"${sYear}":0;
   								 var maxDay = getDaysInMonth(month,year);
   								 if(maxDay==28){
   									 $("#d29").hide();$("#d30").hide();$("#d31").hide();
   								 }else if(maxDay==29){
   									$("#d30").hide();$("#d31").hide();$("#d29").show();
   								 }else if(maxDay==30){
   									$("#d31").hide();$("#d29").show();$("#d30").show();
   								 }
   							 }
     						 var $cate = $('#cate2'),
       						 $tri = $('.cate_tri2', $cate),
      						 $drop = $('div.cate_drop2', $cate),
       						 $inp = $('div.cate_inp2', $cate);

        					$tri.on('click', function(event) {
           					 var $el = $(this);
           					 if( $el.data('active') !== 'on' ) {
           					   $drop[0].style.display = 'block';
            				  $el.data('active', 'on');
           						 } else {
            				  $drop[0].style.display = 'none';
            				  $el.data('active', 'off')
           						 }
       						 });

       					 $drop.on('mouseover', 'li', function(event) {
        				  $inp[0].innerHTML = this.innerHTML; 
       					 }).on('click', 'li', function(event) {
       						 if(this.innerHTML.substr(0,2)!='按日'){
       							$('#sDay').val(this.innerHTML.substr(0,2))
       						 }else{
       							$('#sDay').val('');
       						 }
       						 var year = $("#sYear").val();
       						 var mon = $("#sMonth").val();
       						 var sDay = $("#sDay").val();
       						 if(year!="" && mon!="" && sDay!=""){

       						 }
        				  $drop[0].style.display = 'none';
         				 $tri.data('active', 'off');
       						 });
       					 
       					function getDaysInMonth(month,year){
         					  var days;
         					  if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
         					  else if (month==4 || month==6 || month==9 || month==11) days=30;
         					  else if (month==2) {
         					  if (isLeapYear(year)) { days=29; }
         					  else { days=28; }
         					  }
         					  return (days);
         					}
         				  
         				  function isLeapYear(year) 
         				  { 
	         				  if((year%4==0&&year%100!=0)||(year%400==0)) 
	         				  { 
	         				  	return true; 
	         				  }  
         				 	 return false; 
         				  }
   						 }(jQuery));
  						  </script>
                        <li class="tit_ej_sbg_4">文字列表</li>
                    </ul>
                </div>
<!--[if IE 6]>
<script type="text/javascript" src="images/iepng.js" ></script>
<![endif]-->
</body>
</html>

所需图片及jquery文件.zip (3.1 MB)
下载次数: 0

查看图片附件

分享到：

jquery绑定文字，失去焦点显示文字，得到焦 ... | JS图片滚动代码（无缝、平滑）

2014-10-21 16:20
浏览 856
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

web页面时间模拟控件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

web页面时间模拟控件

评论

发表评论

相关推荐

springMvc定时器执行两次

java截取一位小数 js截取一位小数

滚动条在IE9以下是正常的写法

如何给table顶端加水平滚动条

文字样式 好看

Jquery 版本与asyncbox 弹出框样式 兼容问题，必须1.4版本的

jquery绑定文字，失去焦点显示文字，得到焦点

JS图片滚动代码（无缝、平滑）

JAVA WEB开发中处理乱码汇总

IE9获取file控件的本地文件路径 ie9 document.selection.createRange().text

json对象 和 字符串 互相转换

myeclipse2014 cannot be resolved in either web.xml or the jar files

lightbox用法 img记得加上href

固定电话 和 手机 正则表达式 js

struts2.2 项目搭建 以及与 struts2-json jquery 前后台进行交互

oninput onpropertychange 思明互动 智能互动

jquery.form.js ajaxsubmit上传文件 报对象不支持此属性或方法

分享一个中国省市区县地区选择的jQuery插件

Ext messageBox hide 小应用

遇到jquery ajaxSubmit 无法提交时

最近访客更多访客>>

文字样式好看

Jquery 版本与asyncbox 弹出框样式兼容问题，必须1.4版本的

json对象和字符串互相转换

固定电话和手机正则表达式 js

struts2.2 项目搭建以及与 struts2-json jquery 前后台进行交互

oninput onpropertychange 思明互动智能互动

jquery.form.js ajaxsubmit上传文件报对象不支持此属性或方法