jquery实现时间选择器
本文实例为大家分享了jquery实现时间选择器的具体代码，供大家参考，具体内容如下
效果图：
代码：
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery模仿阿里云购买服务器选择购买时间长度的代码
jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段.下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码. 效果图如下: 代码: <!doctype html> <html lang="en"> <head> <!-- 效果:http://hovertree.com/texiao/jquery// --> <meta charset="UTF-"> <ti
-
贴近用户体验的Jquery日期、时间选择插件
分享一款贴近Jquery日期.时间选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 Js代码 var dateRange = new pickerDateRange('date_demo3', { aRecent7Days: 'aRecent7DaysDemo3', //最近7天 isTodayValid: false, //startDate : '2013-04-14', //endDate : '2013-04-21
-
JQuery设置时间段下拉选择实例
本文实例讲述了JQuery设置时间段下拉选择的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: $(document).ready(function() { var arrT = []; var tt = "{0}:{1}"; for (var i = 0; i < 24; i++) { arrT.push({ text: StrFormat(tt, [i >= 10 ? i : "0" + i, "00&
-
jQuery实现的输入框选择时间插件用法实例
本文实例讲述了jQuery实现的输入框选择时间插件用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset = utf8> <
-
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示 源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr
-
jquery仿苹果的时间/日期选择效果
1.html文件,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-1.12.4.min.js"></script> <script src="./pic
-
jQuery基于muipicker实现仿ios时间选择
首先我们先来看原始的muipicker的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-
jquery实现时间选择器
本文实例为大家分享了jquery实现时间选择器的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" c
-
jQuery日期范围选择器附源码下载
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示 下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs
-
jquery编写日期选择器
使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口: (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年份前后五年 (4)月份固定12个月 (5)天数根据年份与月份的变化而变化 (6)点击确定,关闭弹窗,文本框里面的时间编程选中时间 1.若是jQuery跟bootstrap弹窗,必须引入文件包: 2.写一个文本框,给他id用来写事件: 3.去bootstrap里面找到模态框,复制,黏上就行了: 4.把模态框里没用的东西去掉,并加上三个下拉框
-
jQuery双向列表选择器DIV模拟版
前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV
-
JavaScript 日期时间选择器一些小结
flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScript 日期时间选择器. 下载 演示 GitHub flatpickr 不依赖于任何库.更小的用户界面,但有很多主题.丰富的 API 和事件系统使其适用于任何环境.可用于 webpack ,也可作为 jQuery 插件使用. 安装 安装 flatpickr 模块 使用 NPM 安装 flatpickr 模块.包管理工具: https://www.npmjs.com/package/bower-npm-resolv
-
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_
-
jquery之基本选择器practice(实例讲解)
一.在输入框中输入数字,点击按钮,实现对应事件的功能. html代码: <input id="txt1" type="text" value="2" /> <input id="Button5" type="button" value="改变大于N的行背景为绿色" /> jQuery代码: //改变大于N的行背景为绿色 $("#Button5"
-
vue与bootstrap实现时间选择器的示例代码
一.下载bootstrap-datetimepicker时间选择器js,css文件. 1. github地址:bootstrap-datetimepicker 2. 官方网站地址:官网bootstrap-datetimepicker地址,有具体的例子与解释 二.在vue项目文件中引入 import './assets/css/bootstrap.min.css' import "./assets/css/bootstrap-datetimepicker.min.css" import
-
jQuery.prototype.init选择器构造函数源码思路分析
一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询
-
jQuery中:enabled选择器用法实例
本文实例讲述了jQuery中:enabled选择器用法.分享给大家供大家参考.具体分析如下: 此选择器可以选取所有可用的元素. 语法结构: 复制代码 代码如下: $(":enabled") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("input:enabled").css("background-color","red") 以上代码能够将可用的input元素的背景颜色