注册有礼

怎样jquery用写一个年月日的时间选择器？

Admin 2021-08-26 群英技术资讯 369 次浏览

上一篇：怎样用js写一个简单的购物车功能？ 下一篇：js 数组去重的方法有哪一些？你了解多少？

    这篇文章给大家分享的是有关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实现时间选择器的效果，大家可以关注其他相关文章。

文本转载自脚本之家

群英智防CDN，智能加速解决方案
标签： jquery 时间选择器

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：怎样用js写一个简单的购物车功能？ 下一篇：js 数组去重的方法有哪一些？你了解多少？

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服