做开发项目的时候发现要选择一个时间段，先用了一下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>
网友评论