jquery實(shí)現(xiàn)時(shí)間選擇器
更新時(shí)間：2021年04月27日 09:31:30 作者：Bright2017
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)時(shí)間選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)時(shí)間選擇器的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
<!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>時(shí)間選擇器</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">選擇時(shí)間</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>請(qǐng)選擇截止時(shí)間</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);
// 監(jiān)聽(tīng)滾動(dòng)事件
var scroll_year_index = '2020'; //年份
var scroll_month_index = '01'; //月份
var scroll_day_index = '01'; //天數(shù)
// 年份
const $ScrollWrap = $(".billing_time_one");
// 月份
const $ScrollWrap_month = $(".billing_time_two");
// 天
const $ScrollWrap_day = $(".billing_time_three");
// 監(jiān)聽(tīng)滾動(dòng)停止
let t1 = 0;
let t2 = 0;
let timer = null; // 定時(shí)器
let t3 = 0;
let t4 = 0;
let timer2 = null; // 定時(shí)器
let t5 = 0;
let t6 = 0;
let timer3 = null; // 定時(shí)器
// 年份滾動(dòng)
$ScrollWrap.on("touchstart", function() {
// 觸摸開(kāi)始 ≈ 滾動(dòng)開(kāi)始
})
$ScrollWrap.on("scroll", function() {
// 滾動(dòng)
clearTimeout(timer)
timer = setTimeout(isScrollEnd, 100)
t1 = $ScrollWrap.scrollTop()
})
function isScrollEnd() {
t2 = $ScrollWrap.scrollTop();
if (t2 == t1) {
// 滾動(dòng)停止
clearTimeout(timer)
// 獲取每個(gè)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;
// 區(qū)間在 30 ~ 60 之間則選中 這個(gè)區(qū)間范圍是根據(jù)高度來(lái)決定的
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");
// 月份滾動(dòng)歸0
$(".billing_time_two").scrollTop(0);
$(".billing_time_three").scrollTop(0);
// 滾動(dòng)到相應(yīng)位置 每個(gè)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");
// 月份滾動(dòng)歸0
$(".billing_time_two").scrollTop(0);
$(".billing_time_three").scrollTop(0);
// 滾動(dòng)到相應(yīng)位置 每個(gè)li高度 47px
var scrool_heg = k * 47;
$(".billing_time_one").scrollTop(scrool_heg);
}
}
}
}
}
// 月份滾動(dòng)
$ScrollWrap_month.on("touchstart", function() {
// 觸摸開(kāi)始 ≈ 滾動(dòng)開(kāi)始
})
$ScrollWrap_month.on("scroll", function() {
// 滾動(dòng)
clearTimeout(timer2)
timer2 = setTimeout(isScrollEnd2, 100)
t3 = $ScrollWrap_month.scrollTop()
})
function isScrollEnd2() {
t4 = $ScrollWrap_month.scrollTop();
if (t4 == t3) {
// 滾動(dòng)停止
clearTimeout(timer2)
// 獲取每個(gè)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;
// 區(qū)間在 30 ~ 60 之間則選中 這個(gè)區(qū)間范圍是根據(jù)高度來(lái)決定的
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);
// 滾動(dòng)到相應(yīng)位置 每個(gè)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);
// 滾動(dòng)到相應(yīng)位置 每個(gè)li高度 47px
var scrool_heg = k * 47;
$(".billing_time_two").scrollTop(scrool_heg);
}
}
}
}
}
// 天滾動(dòng)
$ScrollWrap_day.on("touchstart", function() {
// 觸摸開(kāi)始 ≈ 滾動(dòng)開(kāi)始
})
$ScrollWrap_day.on("scroll", function() {
// 滾動(dòng)
clearTimeout(timer3)
timer3 = setTimeout(isScrollEnd3, 100)
t5 = $ScrollWrap_day.scrollTop()
})
function isScrollEnd3() {
t6 = $ScrollWrap_day.scrollTop();
if (t6 == t5) {
// 滾動(dòng)停止
clearTimeout(timer3)
// 獲取每個(gè)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;
// 區(qū)間在 30 ~ 60 之間則選中 這個(gè)區(qū)間范圍是根據(jù)高度來(lái)決定的
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");
// 滾動(dòng)到相應(yīng)位置 每個(gè)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");
// 滾動(dòng)到相應(yīng)位置 每個(gè)li高度 47px
var scrool_heg = k * 47;
$(".billing_time_three").scrollTop(scrool_heg);
}
}
}
}
}
// 顯示
$(".end_time").click(function() {
$(".hidden_view").show();
$(".billing_cent_time").show();
});
// 時(shí)間默認(rèn)加載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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery.Form 異步提交表單的簡(jiǎn)單實(shí)例
這篇文章主要介紹了Jquery.Form 異步提交表單的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
async在jquery ajax中是一個(gè)同步參數(shù)。本篇文章給大家介紹jq中的ajax async同步和異步，小伙伴跟著小編一起學(xué)習(xí)吧2015-09-09
一般元素下的多個(gè)指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動(dòng)態(tài)控制,就需要用到j(luò)query的filter()方法2023-08-08
jquery.Jwin.js 基于jquery的彈出層插件代碼
測(cè)試頁(yè)面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用參數(shù)都有詳細(xì)說(shuō)明2012-05-05
這篇文章主要介紹了jQuery中clone()方法用法,實(shí)例分析了clone()方法的功能、定義及克隆匹配的DOM元素的使用技巧,需要的朋友可以參考下2015-01-01
jQuery滾動(dòng)監(jiān)聽(tīng)實(shí)現(xiàn)商城樓梯式導(dǎo)航效果
這篇文章主要介紹了jQuery滾動(dòng)監(jiān)聽(tīng)，實(shí)現(xiàn)商城樓梯式導(dǎo)航,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼，有需要的小伙伴直接帶走吧2014-11-11
基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼(附源碼下載)
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼 的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開(kāi)發(fā),需要的朋友可以參考下2015-12-12
jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的時(shí)鐘效果,使用js的setTimeout方法實(shí)時(shí)修改頁(yè)面元素,實(shí)現(xiàn)動(dòng)態(tài)顯示時(shí)鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下2016-01-01