jquery模拟时间选择器

最新推荐文章于 2024-08-08 08:36:09 发布
最新推荐文章于 2024-08-08 08:36:09 发布
阅读量267 收藏 1
点赞数 1
分类专栏： 网页中用到过的效果 Jquery 文章标签： jquery javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bright2017/article/details/116045624
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="flexible" content="initial-dpr=2" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="author" content="bright2017" />
		<title>时间选择器</title>
		<style type="text/css">
			ul,li{
				list-style: none;
			}
			div{
				box-sizing: border-box;
			}
			/* 遮罩层 */
			.hidden_view {
				width: 100%;
				background: #000000;
				opacity: 0.7;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 9;
				display: none;
			}
			.flex{
				display: flex;
			}
			.billing_cent_time {
				width: 100%;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 99;
				display: none;
			}
			.billing_cent_data {
				width: 100%;
				height: 100%;
				justify-content: center;
				align-items: center;
			}
			
			.billing_select {
				width: 230px;
				height: 230px;
				background: #FFFFFF;
				position: relative;
				border-radius: 3px;
			}
			.billing_select_top>div {
				text-align: center;
				font-size: 15px;
				height: 55px;line-height: 55px;
			}
			.billing_time {
			    width: 100%;
			    justify-content: center;
			    align-items: center;
			    font-size: 15px;
			    padding: 0 20px;
			}
			.billing_time>div {
			    width: calc((100% - 30px)/3);
			    text-align: center;
			    font-weight: bold;
			}
			.billing_select_center_new>ul {
			    width: calc((100% - 30px)/3);
			    height: 100%;
			    overflow: auto;
			    padding: 47px 0;
				box-sizing: border-box;
			}
			.billing_select_center_new>ul>li {
			    width: 100%;
			    height: 47px;
			    line-height: 47px;
			    font-size: 15px;
			    text-align: center;
			    opacity: .5;
			}
			.billing_time>div:nth-child(2), .billing_select_center_new>ul:nth-child(2) {
			    margin: 0 15px;
			}
			.billing_select_center {
				width: 100%;
				height: 141px;
				padding: 0 20px;
				overflow: hidden;
				position: relative;
			}
			.billing_select_center_new {
			    width: 100%;
			    height: 100%;
			    box-sizing: border-box;
			    justify-content: center;
			    align-items: center;
			}
			.billing_select_bot {
				width: 100%;
				text-align: center;
				height: 45px;
				line-height: 45px;
				background: #EEEEEE;
				text-align: center;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 3;
				border-radius: 3px;
			}
			
			.billing_select_center>ul {
				width: 100%;
				height: 100%;
				overflow: auto;
				padding: 47px 0;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;
			}
			
			.billing_select_center>ul>li {
				width: 100%;
				height: 47px;
				line-height: 47px;
				font-size: 0.4rem;
				text-align: center;
				opacity: .5;
			}
			
			.billing_select_border {
				width: calc(100% - 40px);
				left: 20px;
				height: 1px;
				position: absolute;
				top: 47px;
				background-color: #F2F2F2;
			}
			.billing_select_border2 {
			    width: calc(100% - 40px);
			    left: 20px;
			    height: 1px;
			    position: absolute;
			    top: 94px;
			    background-color: #F2F2F2;
			}
			
			.billing_opacity {
				opacity: 1 !important;
			}
			.end_time{
				width: 100px;height: 40px;line-height: 40px;border-radius: 5px;
				text-align: center;margin: 50px auto;font-size: 17px;
			}
			.time_val{
				text-align: center;font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div class="end_time">选择时间</div>
		<div class="time_val"></div>
		<!-- 遮罩层 -->
		<div class="hidden_view"></div>
		<!-- 日期 -->
		<div class="billing_cent_time">
			<div class="billing_cent_data flex">
				<div class="billing_select billing_select2">
					<div class="billing_select_top">
						<div>请选择截止时间</div>
					</div>
					<div class="flex billing_time">
						<div>年</div>
						<div>月</div>
						<div>日</div>
					</div>
					<div class="billing_select_center">
						<div class="billing_select_center_new flex">
							<ul class="billing_time_one">
								<li class="billing_opacity">2020</li>
								<li>2021</li>
								<li>2022</li>
								<li>2023</li>
								<li>2024</li>
								<li>2025</li>
								<li>2026</li>
								<li>2027</li>
								<li>2028</li>
								<li>2029</li>
								<li>2030</li>
								<li>2031</li>
								<li>2032</li>
								<li>2033</li>
								<li>2034</li>
								<li>2035</li>
								<li>2036</li>
								<li>2037</li>
								<li>2038</li>
								<li>2039</li>
								<li>2040</li>
								<li>2041</li>
								<li>2042</li>
								<li>2043</li>
								<li>2044</li>
								<li>2045</li>
								<li>2046</li>
								<li>2047</li>
								<li>2048</li>
								<li>2049</li>
								<li>2050</li>
							</ul>
							<ul class="billing_time_two">
								<li class="billing_opacity">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>
							<ul class="billing_time_three"></ul>
						</div>
						<div class="billing_select_border"></div>
						<div class="billing_select_border2"></div>
					</div>
					<div class="billing_select_bot">
						确定
					</div>
				</div>
			</div>
		</div>
		<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var heg = $(window).height();
				$(".hidden_view").height(heg);
				$(".billing_cent_time").height(heg);
				// 监听滚动事件
				var scroll_year_index = '2020'; //年份
				var scroll_month_index = '01'; //月份
				var scroll_day_index = '01'; //天数

				// 年份
				const $ScrollWrap = $(".billing_time_one");
				// 月份
				const $ScrollWrap_month = $(".billing_time_two");
				// 天
				const $ScrollWrap_day = $(".billing_time_three");
				// 监听滚动停止
				let t1 = 0;
				let t2 = 0;
				let timer = null; // 定时器
				let t3 = 0;
				let t4 = 0;
				let timer2 = null; // 定时器
				let t5 = 0;
				let t6 = 0;
				let timer3 = null; // 定时器
				// 年份滚动
				$ScrollWrap.on("touchstart", function() {
					// 触摸开始 ≈ 滚动开始
				})
				$ScrollWrap.on("scroll", function() {
					// 滚动
					clearTimeout(timer)
					timer = setTimeout(isScrollEnd, 100)
					t1 = $ScrollWrap.scrollTop()
				})

				function isScrollEnd() {
					t2 = $ScrollWrap.scrollTop();
					if (t2 == t1) {
						// 滚动停止
						clearTimeout(timer)
						// 获取每个li距离顶部边框的距离
						var leng = $(".billing_time_one>li").length;
						for (var k = 0; k < leng; k++) {
							var top_leng = $(".billing_time_one").children("li").eq(k).position().top;
							// 区间在 30 ~ 60 之间则选中 这个区间范围是根据高度来决定的
							if (top_leng >= 30 && top_leng <= 60) {
								scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
								$(".billing_time_one").children("li").removeClass("billing_opacity");
								$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
								// 月份滚动归0
								$(".billing_time_two").scrollTop(0);
								$(".billing_time_three").scrollTop(0);
								// 滚动到相应位置 每个li高度 47px
								var scrool_heg = k * 47;
								$(".billing_time_one").scrollTop(scrool_heg);
							} else {
								top_leng = top_leng + 15;
								if (top_leng >= 30 && top_leng <= 60) {
									scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
									$(".billing_time_one").children("li").removeClass("billing_opacity");
									$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
									// 月份滚动归0
									$(".billing_time_two").scrollTop(0);
									$(".billing_time_three").scrollTop(0);
									// 滚动到相应位置 每个li高度 47px
									var scrool_heg = k * 47;
									$(".billing_time_one").scrollTop(scrool_heg);
								}
							}
						}
					}
				}
				// 月份滚动
				$ScrollWrap_month.on("touchstart", function() {
					// 触摸开始 ≈ 滚动开始
				})
				$ScrollWrap_month.on("scroll", function() {
					// 滚动
					clearTimeout(timer2)
					timer2 = setTimeout(isScrollEnd2, 100)
					t3 = $ScrollWrap_month.scrollTop()
				})

				function isScrollEnd2() {
					t4 = $ScrollWrap_month.scrollTop();
					if (t4 == t3) {
						// 滚动停止
						clearTimeout(timer2)
						// 获取每个li距离顶部边框的距离
						var leng = $(".billing_time_two>li").length;
						for (var k = 0; k < leng; k++) {
							var top_txt = $(".billing_time_two").children("li").eq(k).text().trim();
							var top_leng = $(".billing_time_two").children("li").eq(k).position().top;
							// 区间在 30 ~ 60 之间则选中 这个区间范围是根据高度来决定的
							if (top_leng >= 30 && top_leng <= 60) {
								scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
								$(".billing_time_two").children("li").removeClass("billing_opacity");
								$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");

								// 1 3 5 7 8 10 12  月  是31天
								// 2月是28天
								// 4 6 9 11 月搜30天
								$(".billing_time_three").children("li").remove();
								if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt == 08 ||
									top_txt == 10 || top_txt == 12) {
									day31();
								}
								if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {
									day30();
								}
								if (top_txt == 02) {
									day28();
								}
								$(".billing_time_three").scrollTop(0);
								// 滚动到相应位置 每个li高度 47px
								var scrool_heg = k * 47;
								$(".billing_time_two").scrollTop(scrool_heg);
							} else {
								top_leng = top_leng + 15;
								if (top_leng >= 30 && top_leng <= 60) {
									scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
									$(".billing_time_two").children("li").removeClass("billing_opacity");
									$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");

									// 1 3 5 7 8 10 12  月  是31天
									// 2月是28天
									// 4 6 9 11 月搜30天
									$(".billing_time_three").children("li").remove();
									if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt ==
										08 ||
										top_txt == 10 || top_txt == 12) {
										day31();
									}
									if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {
										day30();
									}
									if (top_txt == 02) {
										day28();
									}
									$(".billing_time_three").scrollTop(0);
									// 滚动到相应位置 每个li高度 47px
									var scrool_heg = k * 47;
									$(".billing_time_two").scrollTop(scrool_heg);
								}
							}
						}
					}
				}
				// 天滚动
				$ScrollWrap_day.on("touchstart", function() {
					// 触摸开始 ≈ 滚动开始
				})
				$ScrollWrap_day.on("scroll", function() {
					// 滚动
					clearTimeout(timer3)
					timer3 = setTimeout(isScrollEnd3, 100)
					t5 = $ScrollWrap_day.scrollTop()
				})

				function isScrollEnd3() {
					t6 = $ScrollWrap_day.scrollTop();
					if (t6 == t5) {
						// 滚动停止
						clearTimeout(timer3)
						// 获取每个li距离顶部边框的距离
						var leng = $(".billing_time_three>li").length;
						for (var k = 0; k < leng; k++) {
							var top_leng = $(".billing_time_three").children("li").eq(k).position().top;
							// 区间在 30 ~ 60 之间则选中 这个区间范围是根据高度来决定的
							if (top_leng >= 30 && top_leng <= 60) {
								scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
								$(".billing_time_three").children("li").removeClass("billing_opacity");
								$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");

								// 滚动到相应位置 每个li高度 47px
								var scrool_heg = k * 47;
								console.log("0000000", scrool_heg)
								$(".billing_time_three").scrollTop(scrool_heg);
							} else {
								top_leng = top_leng + 15;
								if (top_leng >= 30 && top_leng <= 60) {
									scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
									$(".billing_time_three").children("li").removeClass("billing_opacity");
									$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");

									// 滚动到相应位置 每个li高度 47px
									var scrool_heg = k * 47;
									$(".billing_time_three").scrollTop(scrool_heg);
								}
							}
						}
					}
				}

				// 显示
				$(".end_time").click(function() {
					$(".hidden_view").show();
					$(".billing_cent_time").show();
				});


				// 时间默认加载31天
				day31();

				function day28() {
					for (var k = 1; k <= 28; k++) {
						var num = '0' + k;
						var txt = `<li>${num}</li>`;
						var txt2 = `<li>${k}</li>`;
						if (k >= 10) {
							$(".billing_time_three").append(txt2);
						} else {
							$(".billing_time_three").append(txt)
						}
					}
					if (k >= 28) {
						$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
					}
				}

				function day30() {
					for (var k = 1; k <= 30; k++) {
						var num = '0' + k;
						var txt = `<li>${num}</li>`;
						var txt2 = `<li>${k}</li>`;
						if (k >= 10) {
							$(".billing_time_three").append(txt2);
						} else {
							$(".billing_time_three").append(txt)
						}
					}
					if (k >= 30) {
						$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
					}
				}

				function day31() {
					for (var k = 1; k <= 31; k++) {
						var num = '0' + k;
						var txt = `<li>${num}</li>`;
						var txt2 = `<li>${k}</li>`;
						if (k >= 10) {
							$(".billing_time_three").append(txt2);
						} else {
							$(".billing_time_three").append(txt)
						}
					}
					if (k >= 31) {
						$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
					}
				}

				// 确定
				$(".billing_select_bot").click(function() {
					console.log(scroll_year_index, "年~", scroll_month_index, '月~', scroll_day_index)
					var tim_cent = scroll_year_index + "-" + scroll_month_index + '-' + scroll_day_index;
					$(".hidden_view").hide();
					$(".billing_cent_time").hide();
					$(".time_val").text(tim_cent);
				});
			});
		</script>
	</body>
</html>

 如果有帮到你，欢迎支持作者！

Bright2017
关注
专栏目录
jQuery日期时间选择器
11-11
插件描述：基于Bootstrup 3的jQuery日期时间选择器. 参考示例：http://www.jq22.com/jquery-info4611
jquery 时间选择器
ZZ的博客
01-18 1012
1.封装timer.js //////////////插件-开始////////////// (function($){ var $timePanel = null ,$hour = null ,$minute = null ,currentTarget = null ,date = new Date();
强烈推荐：时间选择器插件Timepicker for jQuery - 简洁而强大的时间选取工具
最新发布
gitblog_00391的博客
08-08 723
强烈推荐：时间选择器插件Timepicker for jQuery - 简洁而强大的时间选取工具 jquery-timepickerA javascript timepicker plugin for jQuery inspired by Google Calendar.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-timepicker 项目介绍 在...
Jquery 日期选择
weixin_34198583的博客
12-14 197
1、首先将Jquery中的datepicker插件中的相关属性值改成中文的： $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', ...
jQuery实现日期选择器
一个前端工作者的博客
03-31 1594
日期选择器
简单好用的jquery时间选择器
03-18
简单好用的jquery时间选择器，支持年月日和时分秒，上下滚动选择。可兼容手机端
基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器
01-31
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器，它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
jQuery安卓时间选择器插件
06-24
jQuery时间选择器插件通过模拟安卓系统的UI风格，为用户提供了与原生应用相似的交互体验，增强用户体验的同时也简化了开发者的代码实现。 首先，我们来了解一下jQuery。jQuery是一个轻量级的JavaScript库，它简化了...
jQuery双向列表选择器DIV模拟版
10-21
通过以上知识点的总结，可以看出，使用jQuery实现DIV模拟的双向列表选择器，不仅需要对jQuery库有深入的理解，还需要掌握JavaScript的事件处理机制，以及对DOM操作的熟练应用。这些知识点对于前端开发人员来说都是...
jquery时间选择器点击设置当前时间代码不兼容IE678
11-10
针对标题和描述中提到的“jquery时间选择器点击设置当前时间代码不兼容IE678”的问题，我们来深入探讨一下相关知识点。 首先，jQuery时间选择器通常用于在网页上提供一个用户友好的界面，让用户能够方便地选择日期...
jQuery UI -- 日历选择器
2301_79849953的博客
04-13 1366
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
一个jQueryUI时间选择器
08-10
一个jQuery UI时间选择器
jQuery时间选择器datepicker年月日时分秒选择
02-21
datepicker时间插件，多种选择方式，年月日，时分秒，区间范围，单个以及多个选择
JQ选择时间插件
06-27
jq选择时间插件laydate，含源代码及说明文档，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）
jQuery日期时间选择器插件.zip
07-11
代码简介：jQuery日期时间选择器插件是一款高端漂亮的jQuery日期选择控件，可设置小时分钟。
jquery时间选择器
07-23
用jquery实现的时间选择器,简单易用
JQuery简单的时间选择器（picker）
hy3528的博客
11-25 4204
$("#my_Specific").picker({ title: "请选择日期", cols: [ { textAlign: 'center', values: ['2019', '2018', '2017', '2016', '2015', '2014', '2013', ...
jQuery cxCalendar 日期选择器
hellogril前端库
11-14 976
简介 cxCalendar 是基于 jQuery 的日期选择器插件。 它灵活自由，你可以自定义外观，日期的范围，返回的格式等。 版本： jQuery v1.7+ jQuery cxCalendar v1.5.3 下载地址及演示 在线演示地址：http://www.jqhtml.com//wp-content/uploads/2017/05/wz/jQuery.cxCalendar-1.5.3/...
jQuery双向列表选择器DIV模拟实现
本示例中的"jQuery双向列表选择器DIV模拟版"就是一个用jQuery编写的组件，用于实现两个列表之间的元素选择和移动。通过使用div元素代替`<select>`，开发者可以更自由地定制样式和交互。 首先，这个选择器的核心是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值