JavaScript realizes mobile end Sliding Select Date function _javascript skill

This article for you to share the JavaScript implementation of sliding selection date of the specific code for your reference, the specific content as follows

$ (page). On (' Touchmove ', ' #touchMoveTime ', function (event) {Touchmove (event);
  }); Scrollbarinit ();
   Initialize function Scrollbarinit () {var defaultvalue = 3,maxvalue = 30;
   var mydate = new Date ();
   var year = Mydate.getfullyear ();  var month = Mydate.getmonth () + 1;
   Gets the current month (0-11, 0 represents January) var date = Mydate.getdate ();
   var day = new Date (year,month,0); var daycount = Day.getdate ();
     Get the days of the Month: if (date + defaultvalue) > Daycount) {if (month = = 1;
    Year = year + 1;
    }else{month = month + 1;
   Date = (date + defaultvalue)-Daycount;
   }else{date = date + defaultvalue;
   } if (Month <) {month = "0" +month;
   } if (Date < ten) {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;

   Gets the current month (0-11, 0 represents January) 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 ()); Current tick value if (TimeValue < defaultvalue) {TimeValue = defaultvalue}else if (TimeValue > MaxValue) {timeval
   UE = MaxValue; } if (CurrentX < _limit && CurrentX >) {$ (' #days '). Text (TimeValue);
    $ (' #scroll_Track '). CSS ({width:currentx+ "px"});
    if (CurrentX <) {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 ();
      Gets the number of days if (date + timevalue) > Daycount {if (month = =) {month = 1;
     Year = year + 1;
     }else{month = month + 1;
    Date = (date + timevalue)-daycount;
    }else{date = date + TimeValue;
    } if (Month <) {month = "0" +month;
    } if (Date < ten) {date = "0" +date;
   $ (' #endTime '). attr (' value ', year+ '-' +month+ '-' +date ');

 }
  }

<div class= "Cllist" >
<span class= "cl-15 pull-left" >3 days </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 Day </span>
</div>

Jzrqdiv{position:relative top:15px; height:10px border-radius:20px; background: #efefef; Box-shadow:inset 0 1px 2px R GBA (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);}

The above is the entire content of this article, I hope to help you learn.