欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)移動端滑動選擇日期功能

 更新時間:2016年06月21日 14:17:29   作者:木耳休心  
這篇文章主要介紹了JavaScript實現(xiàn)滑動選擇日期功能,基于sui-mobile的移動端實現(xiàn),感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(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">&#xe669;</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)于滑動效果的專題,請點擊下方鏈接查看:

javascript滑動操作匯總

jquery滑動操作匯總

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • 了解一點js的Eval函數(shù)

    了解一點js的Eval函數(shù)

    之前只知道eval可以解析字符串,剛剛網(wǎng)上看了又了解了一點,這里貼出來,不懂的也看看哈
    2012-07-07
  • ECMAscrip新特性函數(shù)介紹

    ECMAscrip新特性函數(shù)介紹

    這篇文章主要介紹了ECMAscrip新特性之函數(shù)的擴展,在ECMAScript?2015中,允許為函數(shù)的參數(shù)添加默認(rèn)值,將默認(rèn)值直接寫在參數(shù)的后面即可,具體情況參考下面文章的詳細(xì)內(nèi)容
    2021-12-12
  • js 固定懸浮效果實現(xiàn)思路代碼

    js 固定懸浮效果實現(xiàn)思路代碼

    懸浮效果想必大家都不陌生吧,本文為大家介紹下使用js固定懸浮的實現(xiàn)思路及代碼,感興趣的朋友可以參考下
    2013-08-08
  • 微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例

    微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項,需要的朋友可以參考下
    2019-05-05
  • List the Codec Files on a Computer

    List the Codec Files on a Computer

    List the Codec Files on a Computer...
    2007-06-06
  • 一個通過script自定義屬性傳遞配置參數(shù)的方法

    一個通過script自定義屬性傳遞配置參數(shù)的方法

    編寫了一個js插件,要使用該插件需要先在html中引入該插件Js,然后再添加一個script標(biāo)簽,在里面調(diào)用,需要的朋友可以看看
    2014-09-09
  • 微信小程序獲取網(wǎng)絡(luò)類型的方法示例

    微信小程序獲取網(wǎng)絡(luò)類型的方法示例

    這篇文章主要介紹了微信小程序獲取網(wǎng)絡(luò)類型的方法,結(jié)合完整實例形式分析了微信小程序通過wx.getNetworkType獲取網(wǎng)絡(luò)類型的相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • js中使用replace方法完成某個字符的轉(zhuǎn)換

    js中使用replace方法完成某個字符的轉(zhuǎn)換

    這篇文章主要介紹了js中使用replace方法完成某個字符的轉(zhuǎn)換,比較實用,需要的朋友可以參考下
    2014-08-08
  • 詳解如何在Javascript和Sass之間共享變量

    詳解如何在Javascript和Sass之間共享變量

    這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • select多選 multiple的使用示例

    select多選 multiple的使用示例

    使用multiple可以實現(xiàn)select多選,本例將為大家介紹下select多選 multiple的使用,新手朋友們可以學(xué)習(xí)下
    2014-06-06

最新評論