JavaScript實(shí)現(xiàn)移動端滑動選擇日期功能
更新時間:2016年06月21日 14:17:29 作者:木耳休心
這篇文章主要介紹了JavaScript實(shí)現(xiàn)滑動選擇日期功能,基于sui-mobile的移動端實(shí)現(xiàn),感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)滑動選擇日期的具體代碼,供大家參考,具體內(nèi)容如下
$(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; //獲取當(dāng)前月份(0-11,0代表1月)
var date = myDate.getDate();
var day = new Date(year,month,0);
var daycount = day.getDate(); //獲取本月天數(shù):
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; //獲取當(dāng)前月份(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())); //當(dāng)前刻度值
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(); //獲取本月天數(shù)
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 class="clList"> <span class="cl-15 pull-left">3天</span> <div id="touchMoveTime" class="jzrqDiv cl-70 pull-left"> <div id="scroll_Track"></div> <div class="spirit icon" id="scroll_Thumb"></div> </div> <span class="cl-15 pull-left text-right" 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);}

更多關(guān)于滑動效果的專題,請點(diǎn)擊下方鏈接查看:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)移動端tab切換時下劃線滑動效果
- Swiper.js實(shí)現(xiàn)移動端元素左右滑動
- js原生實(shí)現(xiàn)移動端手指滑動輪播圖效果的示例
- JS實(shí)現(xiàn)移動端整屏滑動的實(shí)例代碼
- js實(shí)現(xiàn)移動端導(dǎo)航點(diǎn)擊自動滑動效果
- 原生javascript移動端滑動banner效果
- 基于JS實(shí)現(xiàn)移動端向左滑動出現(xiàn)刪除按鈕功能
- 基于slideout.js實(shí)現(xiàn)移動端側(cè)邊欄滑動特效
- 淺談移動端之js touch事件 手勢滑動事件
- JS實(shí)現(xiàn)移動端上下滑動一次一屏
相關(guān)文章
微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實(shí)例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項(xiàng),需要的朋友可以參考下2019-05-05
List the Codec Files on a Computer
List the Codec Files on a Computer...2007-06-06
js中使用replace方法完成某個字符的轉(zhuǎn)換
這篇文章主要介紹了js中使用replace方法完成某個字符的轉(zhuǎn)換,比較實(shí)用,需要的朋友可以參考下2014-08-08

