非select模式下的时间三级联动，

最新推荐文章于 2021-03-16 19:57:59 发布
最新推荐文章于 2021-03-16 19:57:59 发布
阅读量533 收藏
点赞数 1
分类专栏： 其它 文章标签： jquery js 三级联动 时间联动 div时间联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sllailcp/article/details/52703058
版权 
<img src="https://img-blog.csdn.net/20160929163544995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=640,user-scalable=no"/>

<title>申请成为坊主</title>


<style>
*{margin:0;padding:0;list-style:none;border:0;}
.form1{padding:100px;float:left}
.yearout{float:left;position:relative;width:100px;text-align:center;margin-right:25px;}
.yearhead,.monthhead,.dayhead{width:100%;border:1px solid #ccc;line-height:30px;cursor:pointer;}
.years,.months,.days{width:100%;border:1px solid #ccc;border-top:0;line-height:30px;cursor:pointer;max-height:300px;overflow-y:auto;display:none;}
.years div:hover,.months div:hover,.days div:hover{background:red}
.months{float:left;position:relative;}
.days{float:left;position:relative;}

</style>

</head>

<body>
<div class="form1">
	<div class="yearout">
    	<div class="yearhead">2015</div>
    	<div class="years">
        </div>
    </div>
	<div class="yearout">
    	<div class="monthhead">2015</div>
    	<div class="months">
        </div>
    </div>
	<div class="yearout">
    	<div class="dayhead">2015</div>
    	<div class="days">
        </div>
    </div>
	
</div>
<div class="form1">
	<div class="yearout">
    	<div class="yearhead">2015</div>
    	<div class="years">
        </div>
    </div>
	<div class="yearout">
    	<div class="monthhead">2015</div>
    	<div class="months">
        </div>
    </div>
	<div class="yearout">
    	<div class="dayhead">2015</div>
    	<div class="days">
        </div>
    </div>
	
</div>
<div class="form1">
	<div class="yearout">
    	<div class="yearhead">2015</div>
    	<div class="years">
        </div>
    </div>
	<div class="yearout">
    	<div class="monthhead">2015</div>
    	<div class="months">
        </div>
    </div>
	<div class="yearout">
    	<div class="dayhead">2015</div>
    	<div class="days">
        </div>
    </div>
	
</div>


<script src="jquery.min.js"></script>
<!--/*var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
console.log(result)*/-->
<script>


$(function(){
	var D1=new DateTime();
	D1.init('.form1',{//最外层div
		yearhead:'.yearhead',//选定的年
		monthhead:'.monthhead',//选定的月
		dayhead:'.dayhead',//选定的日
		year:'.years',//年容器
		month:'.months',//月容器
		day:'.days'//日容器
	});
	
	
	$('.yearout').each(function(index, element) {//点击显示
        $(element).click(function(e) {
            $(element).find('div:eq('+1+')').show();
            $(element).siblings('.yearout').find('div:eq('+1+')').hide();
           
        });
    });
	
	
})


function DateTime(){
	this.set={
		yearhead:'.yearhead',//选定的年
		monthhead:'.monthhead',//选定的月
		dayhead:'.dayhead',//选定的日
		year:'.years',//年容器
		month:'.months',//月容器
		day:'.days'//日容器
	}
}

DateTime.prototype.init=function(obj1,obj2){
	var This=this;
	this.obj=$(obj1);
	$.extend(This.set,obj2);
	this.obj.each(function(index,element){
		var myDate = new Date();
		var nowyear=myDate.getFullYear();//当前年份
		var nowmonth=myDate.getMonth()+1;//当前月份
		var nowday=myDate.getDate();//当前几号
		var secyear=nowyear;//选择年份
		var secmonth=nowmonth;//选择月份
		var secday=nowday;//选择日
		var nums=[28,29,30,31];
		
		years()
		months()
		days()
		setdatetime({
			nowyear:nowyear+"年",
			nowmonth:nowmonth+"月",
			nowday:nowday+"日"
		});//设置最初始的时间
		
		function setdatetime(times){//设置选中的当前时间
			$(element).find(This.set.yearhead).html(times.nowyear)
			$(element).find(This.set.monthhead).html(times.nowmonth)
			$(element).find(This.set.dayhead).html(times.nowday)
		}
		
		$(document).on('click',obj1+':eq('+index+') '+This.set.year+' div',function(e) {
			secyear=$(this).html()
			var re = /年|月|日/g
			secyear=secyear.replace(re,'');
			$(this).parent(This.set.year).hide()
			days();
			setdatetime({
				nowyear:secyear+"年"
			});
		});
		$(document).on('click',obj1+':eq('+index+') '+This.set.month+' div',function(e) {
			secmonth=$(this).html();
			var re = /年|月|日/g
			secmonth=secmonth.replace(re,'');
			$(this).parent(This.set.month).hide()
			days();
			setdatetime({
				nowmonth:secmonth+"年"
			});
		});
		$(document).on('click',obj1+':eq('+index+') '+This.set.day+' div',function(e) {
			secday=$(this).html();
			var re = /年|月|日/g
			secday=secday.replace(re,'');
			$(this).parent(This.set.day).hide()
			setdatetime({
				nowday:secday+"日"
			});
		});
		
		function years(){
			for(i=2015;i>=2001;i--){
				if(i==nowyear){
					$(element).find(This.set.year).append('<div selected>'+i+'年</div>');
				}else{
					$(element).find(This.set.year).append('<div>'+i+'年</div>');
				}
			}
		}
		
		function months(){
			for(i=12;i>=1;i--){
				if(i==nowmonth){
					$(element).find(This.set.month).append('<div>'+i+'月</div>');
				}else{
					$(element).find(This.set.month).append('<div>'+i+'月</div>');
				}
			}
			
		}
		function days(){
			
			$(element).find(This.set.day).html('');//清空原有数据
			var day_num=nums[3]
			//This.runnian(secyear)&&secmonth==2?day_num=nums[1]:day_num=day_num
			if(This.runnian(secyear)&&secmonth){
				day_num=nums[1]
			}
			
			if((secmonth==1||secmonth==3||secmonth==5||secmonth==7||secmonth==8||secmonth==10||secmonth==12)){
				day_num=nums[3];
			}
			if((secmonth==4||secmonth==6||secmonth==9||secmonth==11)){
				day_num=nums[2];
			}
			
			if(!This.runnian(secyear)&&secmonth==2){
				day_num=nums[0];
			}
			setdatetime({
				nowmonth:12+"月",
				nowday:day_num+"日"
			});
			for(i=day_num;i>=1;i--){
				if(i==nowday){
					$(element).find(This.set.day).append('<div selected>'+i+'日</div>');
				}else{
					$(element).find(This.set.day).append('<div>'+i+'日</div>');
				}
			}
		}
	})
	
}

DateTime.prototype.runnian=function(secyear){//判断是否闰年
	return (secyear%4==0&&(secyear%10!=0||secyear%400==0))
}	
	
</script>


</body>
</html>

 

转载请注明出处：http://blog.csdn.net/sllailcp/article

 

 

预览图如下图，默认为当天日期，2016年9月29.

 

榴莲不好吃
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp页面的三级联动
weixin_33724659的博客
11-23 1385
首先先看一下要做出来的效果：之前想用js+Ajax异步做出来，但是写着写着就写乱了这次用的是jQuery+JSON废话不多说，直接开工，首页说一下数据库:三个表：province表:city表：county表：jsp页面代码：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> ...
js 省市区select 三级联动(全国城市三级联动下拉列表)
12-08
全国城市三级联动下拉列表,含修改页面select信息自动加载部分...个人博客：http://blog.csdn.net/qq_35624642?viewmode=contents
原生js写简单三级联动以及复杂三级联动
我的博客
08-23 1万+
1. 简单三级联动 效果图： 思想：当选择省时，创建对应的市子对象，并将其加入父元素中。当选择某一个市时，创建对应的区子对象，并将其加入父元素中。当选择其他省/市时，对应的市、区/区的选项都变为请选择。要注意：在每次重新选择时，需要将其余select标签的options元素的长度为1，即做一次清空。 知识点：① 在创建<select></select>标签的子元素&...
jsp省市区三级联动
weixin_45285459的博客
02-11 934
1.添加使用.jar c3p0-0.9.5.5.jar commons-dbutils-1.7.jar fastjson-1.2.62.jar jstl-1.2.jar mchange-commons-java-0.2.19.jar mysql-connector-java-8.0.17.jar 2.创建数据库： CREATE TABLE `provice` ( `id` int(11) N...
jsp中用js实现三级联动
11-28
jsp中用js代码实现了简易的三级联动功能
jsp-ajax的三级联动(省市区mysql数据库表)
09-30
用jsp写的，ajax的三级联动。大家可以看看。菜鸟作品多多关照有写好的省市区mysql数据库表
jQuery+jsp实现省市县三级联动效果(附源码)
11-24
本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法。分享给大家供大家参考，具体如下： 在这里，用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来： 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePa
时间日期三级联动BHLDatePicker
07-30
时间日期三级联动BHLDatePicker
时间和三级联动控件
11-12
PickerView 仿iOS的PickerView控件，有时间选择和选项选择并支持一二三级联动效果 ——TimePopupWindow 时间选择器，支持年月日时分，年月日，时分等格式 ——OptionsPopupWindow 选项选择器，支持一，二，三级选项选择，并且可以设置是否联动 使用gradle 依赖: java compile 'com.bigkoo:pickerview:1.0.0' Demo 图片（招行信用卡的“掌上生活”里面条件选择器他们用的就是我这个库，大家可以当实际项目参考）
手机端mobile-area-select三级联动
03-16
手机端mobile-area-select三级联动
Android-三级日期时间选择器 三级联动
Welcome To As.Kai 's Home
05-28 1018
首先第一步导入依赖库 对了 我这边使用的是AS3.5.2版本 androidx implementation 'com.contrarywind:Android-PickerView:4.1.9' MainActivity.java LinearLayout birth; @BindView(R.id.birth_text) TextView birthText; case R.id.birth: SimpleDateFormat formatter = new SimpleDateFormat("y
php中layui 三级联动,layui怎么实现三级联动
weixin_42474164的博客
03-16 418
layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过layui模块实现三级联动即可。本教程操作环境：windows10系统、layui2.5.6版，该方法适用于所有品牌电脑。基于layui的三级联动模块1.html的页面代码如下：请选择省请选择市请选...
JS 实现的年月日三级联动
故事我忘了°的博客
01-09 1612
JS 实现的年月日三级联动 js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 AYN=5;//年份范围往后0年 function YMDselect(){ this.SelY=document.getElementsByName(arguments[0])[0]; this.SelM=document.ge...
实现select的三级联动
Gadxiong的博客
05-31 1243
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级联动&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js&
省市县三级联动（第三种方法）
qizhichao110的专栏
03-14 984
首先在程序的前台添加好三个DropDownList，分别为省市县，然后在省市的 SelectedIndexChanged的事件中填写代码，具体代码如下：   namespace 省市县三级联动 {     public partial class WebPCA : System.Web.UI.Page     {         protected void Page_Load(
mac安装mongodb
热门推荐
榴莲不好吃的专栏
06-12 2万+
mac安装mongodb
js实现省市区三级联动非select下拉框版
最新发布
12-19
实现省市区三级联动的非select下拉框版，可以利用js和...通过以上的方式，我们就可以实现一个非select下拉框版的省市区三级联动。这样的实现方式不仅可以提升用户体验，还可以减少页面的加载开销和提高页面的响应速度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值