html jQuery 时间范围选择器

做开发项目的时候发现要选择一个时间段，先用了一下layui的时间段选择器，发现在手机端不是很好用，因为太宽了，会有一部分超出页面，然后就自己做了一个，先贴个图，然后直接贴代码了。有需要修改的地方，希望大家帮忙，修改一下，谢谢大家。


demo.jpg

timeSelector.js

/*!
 * timeSelector.js
 * By leafly
 * Date:2020/4/29
*/
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    var doc = window.document,
        dpr = $('html').attr('data-dpr') || 1,
        resH = 40 * dpr,
        body = $('body'),
        emptyStr = "<li></li>",
        isTouch = "ontouchend" in doc,
        tstart = isTouch ? "touchstart" : "mousedown",
        tmove = isTouch ? "touchmove" : "mousemove",
        tend = isTouch ? "touchend" : "mouseup",
        tcancel = isTouch ? "touchcancel" : "mouseleave";

    var domDate = '<div id="timeSelector-wrapper">'+
            '<h2 class="timeSelector_title" id="timeSelector_title">00:00-00:00</h2>'+
            '<div class="timeSelector_wrap">'+
                '<div class="timeSelector_content" id="timeSelector_content">'+
                    '<div class="Selection">至</div>'+
                    '<ul class="startTimeHour" id="startTimeHour">'+
                    '</ul>'+
                    '<ul class="startTimeMinute" id="startTimeMinute">'+
                    '</ul>'+
                    '<ul class="endTimeMinute" id="endTimeHour">'+
                    '</ul>'+
                    '<ul class="endTimeMinute" id="endTimeMinute">'+
                    '</ul>'+
                '</div>'+
            '</div>'+
            '<div class="timeSelector-button">'+
                '<a id="timeSelector-cancel" href="javascript:">取消</a><a id="timeSelector-confirm" href="javascript:">确定</a>'+
            '</div>'+
        '</div>'+
    '</div><div id="timeSelector-mask"></div>';
   
    body.append(domDate);
    
    var createTimeSelector = {
        start_hm:function(){
            var domHours = '',domMinutes = '';
            
            for (var i = 0; i <= 23; i++) {
                i = i<10?'0'+i:i;
                domHours += '<li><span>' + i + '</span></li>';
            }
            $('#startTimeHour').html(emptyStr + domHours + emptyStr);
            
            for (var j = 0; j <= 59; j++) {
                j = j<10?'0'+j:j;
                domMinutes += '<li><span>' + j + '</span></li>';
            }
            $('#startTimeMinute').html(emptyStr + domMinutes + emptyStr);
            
        },
        end_hm:function(){
            var domHours = '',domMinutes = '';
            
            for (var i = 0; i <= 23; i++) {i = i<10?'0'+i:i;domHours += '<li><span>' + i + '</span></li>';}
            $('#endTimeHour').html(emptyStr + domHours + emptyStr);
            
            for (var j = 0; j <= 59; j++) {j = j<10?'0'+j:j;domMinutes += '<li><span>' + j + '</span></li>';}
            $('#endTimeMinute').html(emptyStr + domMinutes + emptyStr);
            
        },
        slide:function(){
            var T,mT,isPress = false,el = $('#timeSelector_content ul');
            el.bind(tstart, function(e){
                e.stopPropagation();
                e.preventDefault();
                var e = e.originalEvent;
                T = e.pageY || e.touches[0].pageY;
                if(!isTouch){isPress = true;}
            });
            
            el.bind(tmove, function(e){
                e.stopPropagation();
                e.preventDefault();
                var e = e.originalEvent,that = $(this);
                if(!isTouch && !isPress){return false};
                mT = e.pageY || e.touches[0].pageY;
                that.css('top', that.position().top + (mT - T) + 'px');
                T = mT;
                if (that.position().top > 0) that.css('top', '0');
                if (that.position().top < -(that.height() - (3*40*dpr))) that.css('top', '-' + (that.height() - (3*40*dpr)) + 'px');
            })
            
            el.bind(tend, function(e){
                e.stopPropagation();
                e.preventDefault();
                var e = e.originalEvent,that = $(this);
                isPress = false;
                dragEnd(that);
            })
            
            el.bind(tcancel, function(e){
                e.stopPropagation();
                e.preventDefault();
                var e = e.originalEvent,that = $(this);
                isPress = false;
                // 解决一个pc端莫名触发问题
                if(!isTouch && + new Date() > time + 600){
                    dragEnd(that);
                }
            })
            
            function dragEnd(that){
                //滚动调整
                var t = that.position().top;
                that.css('top',Math.round(t/resH)*resH+'px');
                t = Math.round(Math.abs($(that).position().top));
                
                var li = that.children('li').get(t/resH+1);
                $(li).addClass('active').siblings().removeClass("active");
                createTimeSelector.toTitle();
                
                var id = that.attr('id');
                
                var sh = $('#startTimeHour .active').text(),
                    sm = $('#startTimeMinute .active').text(),
                    eh = $('#endTimeHour .active').text(),
                    em = $('#endTimeMinute .active').text();
            
                if(id=="startTimeHour" || id == "startTimeMinute"){
                    if(Number(sh) * 60 + Number(sm) > Number(eh) * 60 + Number(em) ){
                        createTimeSelector.setActive(sh + ":" + sm + "-" + sh + ":" + sm);
                        createTimeSelector.refresh();
                    }
                }else if(id=="endTimeHour" || id == "endTimeMinute"){
                    if(Number(sh) * 60 + Number(sm) > Number(eh) * 60 + Number(em) ){
                        createTimeSelector.setActive(eh + ":" + em + "-" + eh + ":" + em);
                        createTimeSelector.refresh();
                    }
                }
                
            }
            
            
        },
        resetActive:function(that){
            var value = that.val();
            if(value==""||value==undefined){
                value = "00:00-00:00";
            }
            createTimeSelector.setActive(value);
        },
        setActive:function(value){
            $("#timeSelector_title").html(value);
            var sh = value.slice(0,2),sm = value.slice(3,5),eh = value.slice(6,8),em = value.slice(9);
            $('#timeSelector_content ul').each(function() {
                var e = $(this),
                eId = e.attr('id');
                e.children('li').each(function() {
                    var li = $(this);
                    var liText=li.text();
                    if (eId == 'startTimeHour' && liText == sh) {
                        li.addClass('active').siblings().removeClass('active');
                        return false;
                    } else if (eId == 'startTimeMinute' && liText == sm) {
                        li.addClass('active').siblings().removeClass('active');
                        return false;
                    } else if (eId == 'endTimeHour' && liText == eh) {
                        li.addClass('active').siblings().removeClass('active');
                        return false;
                    } else if (eId == 'endTimeMinute' && liText == em) {
                        li.addClass('active').siblings().removeClass('active');
                        return false;
                    } 
                })
            })
        },
        refresh:function(){
            $('#timeSelector_content ul').each(function(){
                var that = $(this);
                var liTop = -(that.children('.active').position().top -resH);
                that.animate({
                    top: liTop
                },
                400);
            })
        },
        
        toTitle:function(){
            var sh = $('#startTimeHour .active').text(),
            sm = $('#startTimeMinute .active').text(),
            eh = $('#endTimeHour .active').text(),
            em = $('#endTimeMinute .active').text();
            $("#timeSelector_title").html(sh+":"+sm+"-"+eh+":"+em);
        },
        
        show:function(isShow){
            var domMain = $('#timeSelector-wrapper'),
                domMask = $('#timeSelector-mask');
            if (isShow) {
                domMain.show();
                domMask.show();
                time = + new Date();
                body.css('overflow','hidden');
            } else {
                domMain.hide();
                domMask.hide();
                body.css('overflow','auto');
            }
        },
        clear:function(){
            that = $($('#timeSelector-confirm').attr('d-id'));
            createTimeSelector.resetActive(that);
            createTimeSelector.refresh();
            createTimeSelector.show(false);
        }
    };
    
    createTimeSelector.start_hm();
    createTimeSelector.end_hm();
    createTimeSelector.slide();
        
    function TimePeriodSelectorTool(obj){
        var that = $(obj);
        if(that.val() == ""){
            that.val("00:00-00:00")
        }
        that.attr("readonly","readonly");
        
        that.bind('click',function() {
            createTimeSelector.resetActive(that);
            createTimeSelector.show(true);
            createTimeSelector.refresh();
            $('#timeSelector-confirm').attr('d-id', obj);
        });
    }
    
    $.timeSelector = function(obj){
        TimePeriodSelectorTool(obj);
    }
    
    $('#timeSelector-cancel,#timeSelector-mask').bind('click',function(){
        createTimeSelector.clear();
    })
    //确定
    $('#timeSelector-confirm').bind('click',function(){
        that = $($('#timeSelector-confirm').attr('d-id'));
        that.val($('#timeSelector_title').html());
        createTimeSelector.show(false);
    })
}))

timeSelector.css

body{
  font-family:PingFangSC-Regular;
  margin:0;
}

a {
  text-decoration: none;
}

ul,li {
  margin: 0;
  padding: 0
}

li {
  list-style-type: none
}

#timeSelector-wrapper{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 56;
  text-align: center;
  background: #fff;
  border-radius: 3px;
  padding-bottom: 5px;
  padding-top: 5px;
  display: none
}

#timeSelector-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  filter: alpha(Opacity=50);
  -moz-opacity: .5;
  opacity: .5;
  z-index: 55;
  display: none
}

.timeSelector_title {
    height: 25px;
    line-height: 25px;
    margin:5px;
    text-align: center;
    font-size: 1.0rem;
    letter-spacing:5px;
    color: #108ee9;
}

.timeSelector_wrap {
    height: 120px;
    overflow: hidden;
    margin: 0 10px;
    position: relative;
    border: 1px solid #ddd;
}

.timeSelector-button button {
    background: #108ee9;
    color: #fff;
    border-radius: 2px;
    width: 100%;
    border: none;
    padding: 0.7rem 0;
    font-size: 0.9rem;
}

.Selection {
    position: absolute;
    width: 100%;
    left: 0;
    top: 40px;
    font-size: 0.9rem;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #e4e4e4;
}

.timeSelector_wrap .timeSelector_content ul {
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    float: left;
}

.Selection_text {
    line-height: 120px;
    font-size: 0.9rem;
    text-align: center;
    z-index: 1000;
}

.timeSelector_wrap .timeSelector_content ul li{
    height:40px;
    line-height:40px;
    font-size:0.95rem;
}

#startTimeMinute{
    left:20%;
}

#endTimeHour{
    left:60%;
}

#endTimeMinute{
    left:80%;
}

#timeSelector-cancel, #timeSelector-confirm {
    border-radius: 3px;
    float: left;
    width: 40%;
    line-height: 30px;
    font-size: 15px;
    color: #333333;
    margin: 0 5%;
    padding-top: 10px;
}

#timeSelector-confirm {
    color: #5CBB9D;
}

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>timeSelector demo</title>

<link href="./timeSelector.css" rel="stylesheet" type="text/css" />

</head>
<body>

<input type="text" value="02:03-04:05" id="demo"  style="width:166px;height:19px;">

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./timeSelector.js"></script>
<script type="text/javascript">
$.timeSelector('#demo');
</script>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351