简单的时间选择器

1、图片示例

2、css

（1）首先我自己有个cssreset，懒得试没有这个会怎么样了

html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;overflow:hidden;height:100%;}
::-webkit-scrollbar{0}
body{font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:none;overflow:hidden;height:100%;max-875px;margin:0 auto;padding:0;color: #333}
article,aside,blockquote,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;-webkit-tap-highlight-color:transparent}
input[type=button]{-webkit-appearance:none;outline:0}
audio,canvas,video{display:inline-block}
em,i{display:inline;font-style:normal;font-weight:400}
a{color:#fff;-webkit-tap-highlight-color:transparent;text-decoration:none}
img{display:block;100%}
ol,ul{list-style:none}
input,textarea{outline:0}

/* 终端适配 */
@media screen and (min-240px){body,button,html,input,select,textarea{font-size:9px}}
@media screen and (min-280px){body,button,html,input,select,textarea{font-size:11px}}
@media screen and (min-320px){body,button,html,input,select,textarea{font-size:12px}}
@media screen and (min-340px){body,button,html,input,select,textarea{font-size:13px}}
@media screen and (min-354px){body,button,html,input,select,textarea{font-size:14px}}
@media screen and (min-378px){body,button,html,input,select,textarea{font-size:15px}}
@media screen and (min-413px){body,button,html,input,select,textarea{font-size:15.5px}}
@media screen and (min-426px){body,button,html,input,select,textarea{font-size:16px}}
@media screen and (min-450px){body,button,html,input,select,textarea{font-size:18px}}
@media screen and (min-480px){body,button,html,input,select,textarea{font-size:19px}}
@media screen and (min-540px){body,button,html,input,select,textarea{font-size:20.25px}}
@media screen and (min-590px){body,button,html,input,select,textarea{font-size:22.13px}}
@media screen and (min-600px){body,button,html,input,select,textarea{font-size:22.5px}}
@media screen and (min-640px){body,button,html,input,select,textarea{font-size:24px}}
@media screen and (min-720px){body,button,html,input,select,textarea{font-size:27px}}
@media screen and (min-800px){body,button,html,input,select,textarea{font-size:30px}}
@media screen and (min-874px){body,button,html,input,select,textarea{font-size:33px}}

（2）接着就是项目的css

.stime_big_box{
    position: fixed;
    bottom: 0;
     100%;
}
.stime_select_box{
    font-size: 1.4rem;
    color: #C8C8C8;
    height: 13rem;
    padding-top: .5rem;
    border-top: 2px solid #DBDBDB;
}
.stime_btn{
    height: 4rem;
    border-top: 2px solid #DBDBDB;
}
.stime_btn>div{
    float: left;
     50%;
    text-align: center;
    line-height: 4rem;
    font-size: 1.4rem;
    color: #2191B7;
}
.stime_btn>div:first-child{
    box-sizing: border-box;
    border-right: 2px solid #DBDBDB;
}
.stime_year_box{
    float: left;
     40%;
    text-align: center;
}
.stime_month_box{
    float: left;
     25%;
    text-align: center;
}
.stime_day_box{
    float: left;
     35%;
    text-align: center;
}
.stime_year,.stime_month,.stime_day{
    height: 13rem;
    overflow: auto;
    position: relative;
}
.stime_year_f,.stime_month_f,.stime_day_f{
    position: absolute;
    height: 13rem;
}
.stime_year_f{
    40%;
}
.stime_month_f{
     25%;
}
.stime_day_f{
     35%;
}
.stime_position_f{
    position: absolute;
    top: 0;
    bottom: 5px;
    left: 0;
    right: 0;
    border-right: 2px solid #DBDBDB;
}
.stime_day_f>.stime_position_f{
    border-right: none;
}
.vertical_btn{
    position: relative;
    top: 50%;
    height: 2.0rem;
    border-top: 2px solid #4688A0;
    border-bottom: 2px solid #4688A0;
     90%;
    margin: 0 auto;
    margin-top: -1.35rem;
    pointer-events: none;
}
.stime_select_year:first-child,.stime_select_month:first-child,.stime_select_day:first-child{
    padding-top: 5.3rem;
}
.stime_select_year:last-child,.stime_select_month:last-child,.stime_select_day:last-child{
    padding-bottom: 5.3rem;
　　height:2.5rem;
}
.stime_select_year,.stime_select_month,.stime_select_day{
    padding: .3rem 0;
}

3、html

<div class="stime_big_box">
        <div class="stime_select_box">

            <div class="stime_year_box">
                <div class="stime_year_f">
                    <div class="stime_position_f"></div>
                    <div class="vertical_btn"></div>
                </div>
                <div class="stime_year">

                </div>
            </div>

            <div class="stime_month_box">
                <div class="stime_month_f">
                    <div class="stime_position_f"></div>
                    <div class="vertical_btn"></div>
                </div>
                <div class="stime_month">

                </div>
            </div>

            <div class="stime_day_box">
                <div class="stime_day_f">
                    <div class="stime_position_f"></div>
                    <div class="vertical_btn"></div>
                </div>
                <div class="stime_day">

                </div>
            </div>

        </div>

        <div class="stime_btn">
            <div class="stime_close">取消</div>
            <div class="stime_sumbit">确认</div>
        </div>
    </div>

4、然后就是js，就大功告成了

var year=1994,month=1,day=1;
        $(function(){
//            初始化年
            var stime_start_year=1900;
            var stime_end_year=new Date().getFullYear();
            var stime_str="";
            var stime_number=stime_end_year-stime_start_year;
            for(let i=0;i<stime_number;i++){
                let number=stime_start_year+i;
                stime_str+='<div class="stime_select_year"><span>'+number+'</span>年</div>';
            }
            $(".stime_year").append(stime_str);
            var html=parseFloat($("html").css("font-size"));
            var true_height=$(".stime_select_year").height()+html *.6;
            $(".stime_year")[0].scrollTop=parseFloat(true_height*94);
            stime_str="";
//            初始化月
            for(let i=0;i<12;i++){
                let number=i+1;
                stime_str+='<div class="stime_select_month"><span>'+number+'</span>月</div>';
            }
            $(".stime_month").append(stime_str);
            stime_str="";
//            初始化日
            for(let i=0;i<31;i++){
                let number=i+1;
                stime_str+='<div class="stime_select_day"><span>'+number+'</span>日</div>';
            }
            $(".stime_day").append(stime_str);
//样式初始化
            $($(".stime_select_year")[94]).css({"color":"#333","font-weight":"500"});
            $($(".stime_select_month")[0]).css({"color":"#333","font-weight":"500"});
            $($(".stime_select_day")[0]).css({"color":"#333","font-weight":"500"});
/********************************************************************/

            $(".stime_sumbit").click(function(){
                alert(year);
                alert(month);
                alert(day);
            });
//            初始化定时器
            var timer=null;
//            获得年份
            $(".stime_year").on("touchend",function(){
                var d_time;
                task();
                function all(){
                    clearInterval(timer);
                    timer=setTimeout(function(){
                        if($(".stime_year").scrollTop()==d_time){
                            succ($(".stime_year"));
                        }else{
                            task();
                        }
                    },300);
                }

                function task(){
                    d_time=$(".stime_year").scrollTop();
                    all();
                }
            });
//            获得月份
            $(".stime_month").on("touchend",function(){
                var d_time;
                task();

                function all(){
                    clearInterval(timer);
                    timer=setTimeout(function(){
                        if($(".stime_month").scrollTop()==d_time){
                            succ($(".stime_month"));
                        }else{
                            task();
                        }
                    },300);
                }

                function task(){
                    d_time=$(".stime_month").scrollTop();
                    all();
                }
            });
//            获得日
            $(".stime_day").on("touchend",function(){
                var d_time;
                task();

                function all(){
                    clearInterval(timer);
                    timer=setTimeout(function(){
                        if($(".stime_day").scrollTop()==d_time){
                            succ($(".stime_day"));
                        }else{
                            task();
                        }
                    },300);
                }

                function task(){
                    d_time=$(".stime_day").scrollTop();
                    all();
                }
            });
        });
//        年月日的公共方法
        function succ(here){
            var html=parseFloat($("html").css("font-size"));
            var true_height=$(".stime_select_year").height()+Math.floor((html *.6) * 100) / 100;
            var scroll_stime_month=here.scrollTop();
            var number=parseFloat(scroll_stime_month/true_height).toFixed(0);
            var now,new_n;
            timer=setInterval(scroll,10);
            function scroll(){
                now= parseInt(here.scrollTop());
                new_n=parseInt(number*true_height);
                if(now>new_n){
                    now--;
                }else{
                    now++;
                }
                here.scrollTop(parseInt(now));
                if(now==new_n){
                    clearInterval(timer);
                }
            }
            here.children().css({"color":"","font-weight":""});
            $(here.children()[number]).css({"color":"#333","font-weight":"500"});

            if(here.hasClass("stime_day")){
                day=$(here.children()[number]).children("span").html();
            }else if(here.hasClass("stime_month")){
                month=$(here.children()[number]).children("span").html();
                nor_month(month);
                year_month(year,month);
            }else if(here.hasClass("stime_year")){
                year=$(here.children()[number]).children("span").html();
                nor_month(month);
                year_month(year,month);
            }
        }
//        选择月份日数的变化
        function nor_month(month){
            var day_length=$(".stime_select_day").length;
            if(month==4||month==6||month==9||month==11){
                if(day_length<30){
                    for(let i=0;i<30-day_length;i++){
                        $(".stime_day").append('<div class="stime_select_day"><span>'+(day_length+i+1)+'</span>日</div>');
                    }
                }else if(day_length>30){
                    $(".stime_select_day").last().remove();
                    setTimeout(function(){
                        succ($(".stime_day"));
                    },300);
                }
            }else if(day_length!=31){
                for(let i=0;i<31-day_length;i++){
                    $(".stime_day").append('<div class="stime_select_day"><span>'+(day_length+i+1)+'</span>日</div>');
                }
            }
        }
//        2月的变化
        function year_month(year,month){
            var day_length=$(".stime_select_day").length;
            if(isleap(year)&&month==2&&day_length!=29){
                if(day_length<29){
                    $(".stime_day").append('<div class="stime_select_day"><span>29</span>日</div>');
                }else{
                    for(let i=0;i<day_length-29;i++){
                        $(".stime_select_day").last().remove();
                    }
                    setTimeout(function(){
                        succ($(".stime_day"));
                    },300);
                }
            }else if(month==2&&day_length!=28){
                for(let i=0;i<day_length-28;i++){
                    $(".stime_select_day").last().remove();
                }
                setTimeout(function(){
                    succ($(".stime_day"));
                },300);
            }
        }
//        闰年方法
        function isleap(the_year){
            var isleap = the_year % 4 == 0 && the_year % 100 !=0 || the_year % 400 ==0;
            return isleap;
        }