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

Admin 2021-08-26 群英技术资�

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

文本转载自脚本之�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部