`

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>
  • 大小: 377.5 KB
分享到:
评论

相关推荐

    Web控件和验证控件Web控件和验证控件

    Web控件是ASP.NET框架提供的一系列服务器端控件,用于创建动态Web页面。这些控件包括: 1. **文本输入控件**:如TextBox,允许用户输入文本,可以设置为单行或多行。 2. **按钮控件**:Button和LinkButton,用于...

    c#.netweb页面嵌入excel控件,网页中在线编辑EXCEL表格实例

    本实例以"C#.NET Web页面嵌入Excel控件,网页中在线编辑EXCEL表格"为主题,详细讲解这一技术的实现方法和关键知识点。 首先,我们要理解的是,为了在Web页面上显示和编辑Excel,我们需要一个能够处理Excel文件的...

    c#.netweb页面嵌入excel控件

    本篇文章将详细探讨如何在ASP.NET Web页面中嵌入Excel控件,以便用户能够直接在浏览器中查看和操作Excel文件。 首先,我们要明白,直接在Web页面上打开Excel文件并不意味着将整个Excel应用嵌入到网页中。通常,我们...

    pb打开web ole控件

    标题 "pb打开web ole控件" 指的是在PowerBuilder(PB)环境中利用OLE(Object Linking and Embedding)控件来打开和显示Web页面的技术。PowerBuilder是一款流行的可视化的编程工具,常用于开发企业级的应用程序。OLE...

    asp.net web页面电子称串口控件完整使用方法

    通过以上步骤,你可以在ASP.NET Web页面中成功集成并使用电子称串口控件。注意,实际开发中可能需要根据具体硬件设备的通信协议进行相应的适配和调整。在测试和部署过程中,务必保证用户的数据安全,遵守相关法规,...

    Axure web端控件

    "Axure web端控件"是指在使用Axure进行Web界面设计时,可以选用的各种组件或元素,这些控件模拟了网页中的常见功能,如按钮、文本框、下拉菜单等,便于设计师搭建用户界面并模拟实际操作流程。 在Axure中,控件库是...

    WEB Office控件

    在Web页面中,这些控件通过JavaScript或VBScript脚本调用,实现文档的打开、编辑、保存等功能。由于它们是客户端控件,因此用户需要在他们的计算机上安装特定的软件,如Office套件,才能正常使用。 【带源码】的Web...

    web控件和html控件.ppt

    这些控件允许开发者创建交互式的用户界面,处理用户输入,以及实现页面间的导航。在本章中,我们将深入探讨这两种控件的基本概念、使用方法以及它们的特点。 首先,HTML控件源自传统的HTML标签,但通过添加`runat=...

    简单调用上个页面的控件

    在第二个页面加载时,通过JavaScript的`window.location.search`获取这些参数,然后根据参数值来模拟对第一个页面控件的操作。例如,更新某个隐藏字段的值,或者在页面加载后执行特定的函数。 2. **本地存储(Local...

    移动端html时间控件

    1. 延迟加载:如果时间控件不是页面的核心部分,可以考虑在需要时再加载。 2. 减少重绘:优化CSS代码,减少不必要的重绘和回流。 3. 事件节流和防抖:对于频繁触发的事件,如滚动,使用节流或防抖技术来减少计算量。...

    web打印控件代码

    2. **HTML到打印文档的转换**:Web页面通常是HTML格式,而打印机需要的是如PDF或XPS这样的文档格式。因此,控件需要能够将HTML转换为这些格式。这可能通过如iTextSharp(PDF)或XPS Document Writer(XPS)等库来...

    Web页面驱动ANSYS Workbench自动化运行实战

    8. **创建Web页面**:设计用户交互界面,包括输入参数的控件、执行按钮和结果展示区域。 9. **编写按钮执行代码**:实现当用户点击按钮时,脚本能够读取输入参数,更新工程文件,然后调用批处理命令执行ANSYS ...

    web word控件

    对于Java开发者,Web Word控件可能涉及到使用Java Applet或Java Web Start技术,将Java代码封装在控件中,然后在Web页面上嵌入执行。这种方式需要考虑到不同浏览器的兼容性和安全性问题。另外,还可以利用开源库,如...

    web页面如何写测试用例

    ### Web页面测试用例知识点详解 #### 一、页面检查 **1. 不同权限用户页面检查** - **目标**: 验证不同权限级别的用户访问特定页面时能否看到与其权限相匹配的内容。 - **测试步骤**: - 登录不同级别的用户账号...

    实现Web页面中链接的点击效果(8KB)

    通过分析和理解这些文件,开发者可以了解到如何在客户端和服务器端处理链接点击事件,以及如何在VB6环境中模拟Web页面行为。这涵盖了前端的HTML和JavaScript交互,以及后端的VBScript和VB6编程,对于理解Web开发的...

    DSOFRAMER webOffice控件 asp.net实例

    - "webOffice":这通常指的是能够在线处理文档的解决方案,DSOFramer就是这样的一个工具,它在Web上模拟了Office的功能。 - "DSOFramer":这是我们要讨论的核心控件,用于在Web应用中展示和编辑文档。 - "源码":...

    (9)uniGUI for C++ builder下如何使用UniPageControl控件多页面系统界面框架?

    在 UniPanel2 上放置一个 UniTreeView 控件,并配置其 Align 为 alClient,然后添加若干树节点以模拟功能菜单。 - **添加 UniPageControl** 在 MainForm 的右侧放置一个 UniPageControl 控件。此时,你可以预先...

    JS时间控件简单易用

    6. **无障碍性**:遵循Web Content Accessibility Guidelines (WCAG),确保屏幕阅读器和其他辅助技术能正确读取和解释时间控件。 7. **响应式设计**:确保时间控件在不同设备和屏幕尺寸上都能正常工作,适应移动...

    EeekSoft.Web.PopupWin.dll控件+使用说明

    首先,你需要在ASP.NET页面中声明一个PopupWin对象,并设置相关属性,如弹出位置(默认右下角)、显示时间、内容等。例如: ```csharp ~/Controls/EeekSoft.Web.PopupWin.ascx" %&gt; ... 这是弹出的信息!" /&gt; ``` ...

Global site tag (gtag.js) - Google Analytics