web页面时间模拟控件

最新推荐文章于 2021-02-13 03:43:48 发布
最新推荐文章于 2021-02-13 03:43:48 发布
阅读量99 收藏
点赞数
分类专栏： Web前端 文章标签： java xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11350/article/details/82607355
版权 

<%@ 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>
iteye_11350
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
日期插件-网页效果
01-09
日期插件
Web选择日期时间控件
02-05
1、极好的用于WEB页面的选择日期、时间的javascript控件。 2、包含4个javascript函数，其中Calendar.js,CalendarSetup.js是必须的,视情况使用calendar-zh.js(中文)或calendar-en.js(英文) 3、有8个不同的css文件，定义了不同的的页面风格 4、有1 个范例Calendar.html,已经在FireFox(3.0.6)、IE7、Opera9.63、Chorme2.0.156.1中测试通过。 5、在使用时注意定义相关HTML元素的ID，同时，Calendar.setup时一定是在页面最后加载
应用于web页面的日期(日历)时间选择器(控件)
tiannet(曾次清)的专栏
03-28 7153
控件特性 实现的主要技术为Javascript, DOM 在iframe中显示控件，不会被SELECT,OBJECT等标签覆盖。 包含日期和时间的选择，也可以只选择日期。  使用举例 选择日期 选择日期小时 选择日期小时分钟 选择日期小时分钟秒  源代码及文档下载：http://pi
javaweb日历代码(简洁可用)
04-24
可用的日历代码 WebCalendar 直接解压里面有html可预览 把相关js文件拷贝到项目目录下即可使用 （注意路径）
一个出色的web页面日历控件
学而时习之
02-26 4482
 在整理旧代码时，发现之前一个用过的web页面日历控件。 1、极好的用于WEB页面的选择日期、时间的javascript控件。 2、包含4个javascript文件，其中Calendar.js,CalendarSetup.js是必须的,视情况使用calendar-zh.js(中文)或calendar-en.js(英文) 3、有8个不同的css文件，定义了不同的的页面风格 4、有1
web控件和html控件.ppt
06-24
这些控件允许开发者创建交互式的用户界面，处理用户输入，以及实现页面间的导航。在本章中，我们将深入探讨这两种控件的基本概念、使用方法以及它们的特点。 首先，HTML控件源自传统的HTML标签，但通过添加`runat=...
Web页面 自定义选择框Select
09-28
为什么不在Web页面中广泛使用自定义选择框呢？主要原因在于，原生的Select控件经过长期优化，已经具备了良好的用户接受度和全面的交互细节。而用JS模拟Select，需要大量工作进行开发和测试，且很可能无法完全复现...
Web编程技术补考模拟试卷B卷.doc
11-19
【Web编程技术补考模拟试卷B卷】 一、填空题 1. 常见的Web服务器包括IIS（Internet Information Services）、Apache和Tomcat。这些服务器负责处理HTTP请求，提供网页内容和服务。 2. 常用的Web编辑工具有...
asp.net web页面电子称串口控件完整使用方法
07-31
asp.net电子称串口控件完整使用方法 完整的js访问电子称接口代码 解决客户端访问MSCOMM32.OCX的问题
web实践小项目<一>:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
a5996608的博客
08-04 958
暑假自学了些html/css,javascript和python，苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统。借第一版完成之际，希望能将实践期间犯过的错误和获得的新知进行整理，希望能给其他初学者提供参考，也希望有大神在浏览我粗糙的开发过程中能指出一些意见或建议。 （阅读以下内容需要有一定的html/css，javascript,python和sql基础，...
HTML5日期输入框(date)
热门推荐
z_xiaocun的博客
07-17 6万+
HTML5的出现大大提高了程序员的开发效率，date日期选择器只是其中之一，还有其他一些新的特性，我们一起学习。
web客户端时钟总结
我的专栏
01-29 1444
前几天开发了一个小系统，需求很简单，倒没什么好说的。然后我想记录的就是其中做的一个web clock。因为以前也做过，但是发现这个东西还不是我以前做的这么简单，现在做一下总结：1.记得以前的一个.net的项目需要一个web clock，因为当时对js还不是很熟悉，然后在网上搜了一下，发现大家做的都要写很长一段js代码。于是自己就用一句话搞定了，代码很简单：/*******clock1时钟*
Web页面实时刷新技术探讨
学无止境
05-11 1998
随着网络技术的飞速发展，使用B/S结构来实现项目应用已经越来越多，而实时监控一直都是多数行业软件所必备的功能，由此使用Web页面来实现实时监控成了一种必然的需求。
简单的时间/日期客户端&服务器程序
zuolj的专栏
07-25 1302
简单的时间/日期客户端&服务器程序 本文章代码根据《UNIX网络编程：卷1》修改而来，由于书中源码用于linux系统，题主在windows系统下进行模拟操作，作了部分修改。
java可视化日历_java控制台实现可视化日历小程序
weixin_39532421的博客
02-13 114
本文实例为大家分享了java可视化日历小程序的具体代码，供大家参考，具体内容如下废话不多说，直接上代码import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import ...
如何在 web 端实现一个有日历的报表
rqgxy的博客
06-15 358
简单要一个日历控件来选择日期查询，可以直接用报表工具自带的控件或者也有一些开源的控件，比如： 复杂些的情况，如果是想做万年历日程安排表之类的带数据的报表，比如一个考勤系统，要在日历中的每天上加一个是否出勤的状态，这种再用公共日历控件方式或者自己去写程序就很麻烦，推荐用专业报表工具来实现，可以参考： 日历类报表可以这样实现 这么做能实现日历和数据库中的数据做绑定，还有一个好处，可以通过一个日期参数的动态传入，就可以灵活的查询不同月的日历数据的展现情况 ...
web前端控件 labview图标
最新发布
07-04
在Web前端中使用LabVIEW图标时，可以将LabVIEW模块的功能封装成一个个控件，并在Web页面中使用这些控件进行数据显示和交互操作。这些控件可以包括按钮、输入框、图表等，用于展示LabVIEW程序的运行结果或者接收用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值