本文实例为大家分享了JavaScript实现滑动选择日期的具体代码，供大家参考，具体内容如下
$(page).on('touchmove','#touchMoveTime',function (event) {
touchMove(event);
});
scrollBarInit(); //初始化
function scrollBarInit() {
var defaultValue = 3,maxValue = 30;
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
var date = myDate.getDate();
var day = new Date(year,month,0);
var daycount = day.getDate(); //获取本月天数：
if((date + defaultValue) > daycount){
if(month == 12){
month = 1;
year = year + 1;
}else{
month = month + 1;
}
date = (date + defaultValue) - daycount;
}else{
date = date + defaultValue;
}
if(month < 10){
month = "0"+month;
}
if(date < 10){
date = "0"+date;
}
$("#endTime").attr('value',year+'-'+month+'-'+date);
var currentX = $("#touchMoveTime").width() * (0 / maxValue);
$('#scroll_Track').css({width:currentX+"px"});
$('#scroll_Thumb').css({transform:'translate(' + currentX + 'px, 0)'});
};
function touchMove(event) {
event.preventDefault();
if (!$('#scroll_Thumb') || !event.touches.length) return;
var defaultValue = 3,maxValue = 30;
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
var date = myDate.getDate();
var tran_currentX = '';
var startOffset = parseInt($('#touchMoveTime').offset().left);
var endOffset = parseInt($('#touchRight').offset().left);
var _limit = endOffset - startOffset;
var touchMoveTimeOffsetLeft = $('#scroll_Track').offset().left;
var touch = event.touches[0];
var endX = touch.pageX;
var currentX = endX - touchMoveTimeOffsetLeft;
var Timevalue = Math.round(maxValue * (currentX / $("#touchMoveTime").width())); //当前刻度值
if(Timevalue < defaultValue){
Timevalue = defaultValue
}else if(Timevalue > maxValue){
Timevalue = maxValue;
}
if(currentX < _limit && currentX > 15){
$('#days').text(Timevalue);
$('#scroll_Track').css({width:currentX+"px"});
if(currentX < 20){
tran_currentX = 0
}else{
tran_currentX = currentX - 20;
}
$('#scroll_Thumb').css({transform:'translate(' + tran_currentX + 'px, 0)'});
var day = new Date(year,month,0);
var daycount = day.getDate(); //获取本月天数
if((date + Timevalue) > daycount){
if(month == 12){
month = 1;
year = year + 1;
}else{
month = month + 1;
}
date = (date + Timevalue) - daycount;
}else{
date = date + Timevalue;
}
if(month < 10){
month = "0"+month;
}
if(date < 10){
date = "0"+date;
}
$('#endTime').attr('value',year+'-'+month+'-'+date);
}
}
-------------------------------------------------------------------------
<div>
<span>3天</span>
<div id="touchMoveTime">
<div id="scroll_Track"></div>
<div id="scroll_Thumb"></div>
</div>
<span id="touchRight">30天</span>
</div>
------------------------------------------------------------------------------
.jzrqDiv{position:relative; top:15px; height: 10px; border-radius: 20px; background: #efefef; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
2 #scroll_Track{ position: absolute; top:0; height: 10px; border-radius: 20px; background: #2399dc; z-index: 10;}
3 .spirit {position: absolute; top:-9px; width: 30px;height: 30px;line-height: 30px;font-size: 30px;border-radius: 50%;color: #ddd; background: #fff; z-index: 11;transform: translate(0,0);}
以上就是本文的全部内容，希望对大家的学习有所帮助。
- 黔东南州台江县人民法院2020年招聘聘用制审判辅助人员公告
- 2020年乐山共安彝族乡选拔村干部公告
- 2020年黔东南州三穗县林业局天保工程林管员招聘笔试成绩公示
- 2020年雅安石棉县融媒体中心（石棉县广播电视台）招聘公告
- 黔东南州黄平县2020年急需紧缺人才引进工作实施方案补充公告
- 红河州蒙自市中医医院2020年医、药、技、护理 专业技术人员招聘方案
- 黔东南州岑巩县事业单位2020年引进（第一批）急需紧缺人才实施方案
- 2020年西双版纳州勐腊县事业单位紧缺岗位人才直接考核招聘拟聘用人员公示
- 2019年六盘水市直事业单位专项招聘教育卫生类专业技术人员考察公告（第二批）
- 2020年成都天府新区精神卫生中心招聘公告
- 2019年六盘水市机关生活保障中心招聘工勤人员面试成绩公示
- 西双版纳州生态环境局勐腊分局2020年招聘公告
- 2020年四川大学华西医院麻醉手术中心项目制科研助理招聘启事
- 2020年丽江市宁蒗县鼓励专技人员到乡镇基层服务的岗位需求公告
- 2020年成都华西精准医学产业技术研究院招聘公告
- 西双版纳州生态环境局景洪分局2020年招聘公告
- 贵阳市修文县2020年选调机关事业单位工作人员准考证发放相关事宜通知
- 2020年四川大学华西护理创新研究中心博士后研究人员招聘启事
- 2020年华西医院耳鼻咽喉头颈外科医师招聘启事
- 西双版纳州生态环境局2020年招聘公告
- 2020年华西医生集团皮肤美容科医师岗招聘启事
- 2020年成都天府新区新兴卫生院招聘公告
- 毕节市纳雍县2020年度青年就业见习招募简章
- 普洱市投资促进局2020年招聘编制外招商工作人员综合成绩公告
- 2020年毕节市市直单位青年就业见习招募公告
- absolute guarantee
- absolute humidity
- absolute immunity
- absolute integrity
- absolute justice
- absolute liability
- absolute lie
- absolute loyalty
- absolutely
- absolutely not
- 骤
- 骥
- 骦
- 骧
- 骨
- 骨部
- 骩
- 骪
- 骫
- 骬
- 丰收的田野优秀作文300字
- 有关朝霞景色的作文
- 描写神奇的火烧云作文
- 美丽的人工湖作文400字
- 美丽的大草原作文400字
- 美丽的大草原作文500字
- 夏天的夜晚三年级作文
- 秋天是一幅美丽的画作文
- 三年级秋天的田野作文
- 小学美丽的校园作文500字