يشارك هذا المثال الكود المحدد لـ JavaScript لتنفيذ تواريخ اختيار الانزلاق للرجوع إليه. المحتوى المحدد كما يلي
$ (page) .on ('touchmove' ، '#touchmovetime' ، function (event) {touchmove (event) ؛}) ؛ scrollbarinit () ؛ // تهيئة الدالة scrollbarinit () {var defaultValue = 3 ، maxValue = 30 ؛ var mydate = new date () ؛ var year = myDate.getlyear () ؛ var month = myDate.getMonth () + 1 ؛ // الحصول على الشهر الحالي (0-11،0 يمثل يناير) VAR DATE = MyDate.getDate () ؛ var day = تاريخ جديد (السنة ، الشهر ، 0) ؛ var daycount = day.getDate () ؛ // احصل على عدد الأيام هذا الشهر: if ((Date + DefaultValue)> daycount) {if (month == 12) {month = 1 ؛ سنة = سنة + 1 ؛ } آخر {month = month + 1 ؛ } التاريخ = (التاريخ + defaultValue) - DayCount ؛ } آخر {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)'}) ؛ } ؛ وظيفة touchmove (event) {event.preventDefault () ؛ if (! $ ('#scroll_thumb') ||! event.touches.length) return ؛ var defaultValue = 3 ، maxvalue = 30 ؛ var mydate = new date () ؛ var year = myDate.getlyear () ؛ var month = myDate.getMonth () + 1 ؛ // الحصول على الشهر الحالي (0-11،0 يمثل يناير) VAR DATE = MyDate.getDate () ؛ var tran_currentx = '' ؛ var startOffSet = parseint ($ ('#touchmovetime'). الإزاحة (). اليسار) ؛ var endoffset = parseint ($ ('#touchright'). الإزاحة (). اليسار) ؛ var _limit = endoffset - startOffSet ؛ var touchmovetimeoffsetleft = $ ('#scroll_track'). الإزاحة (). اليسار ؛ var touch = event.touches [0] ؛ var endx = touch.pagex ؛ var currentx = endx - touchmovetimeoffsetleft ؛ var timeValue = Math.Round (maxvalue * (currentx / $ ("#touchmovetime"). width ())) ؛ // قيمة tick الحالية if (timevalue <defaultValue) {timeValue = defaultValue} آخر إذا (timevalue> maxvalue) {timeValue = maxValue ؛ } if (currentx <_limit && currentx> 15) {$ ('#days'). text (timeValue) ؛ $ ('#scroll_track'). css ({width: currentx+"px"}) ؛ if (currentx <20) {tran_currentx = 0} آخر {tran_currentx = currentx - 20 ؛ } $ ('#scroll_thumb'). css ({transform: 'translate (' + tran_currentx + 'px ، 0)'}) ؛ var day = تاريخ جديد (السنة ، الشهر ، 0) ؛ var daycount = day.getDate () ؛ // احصل على عدد أيام الشهر if ((date + timevalue)> daycount) {if (month == 12) {month = 1 ؛ سنة = سنة + 1 ؛ } آخر {month = month + 1 ؛ } Date = (Date + TimeValue) - DayCount ؛ } آخر {date = date + timeValue ؛ } if (month <10) {month = "0"+month ؛ } if (date <10) {date = "0"+date ؛ } $ ('#endtime'). attr ('value' ، year+'-'+month+'-'+date) ؛ }}<viv> <span> 3 أيام </span> <div id = "touchmovetime"> <div id = "scroll_track"> </viv> <div id = "scroll_thumb"> </viv> </viv> <span id = "touchright"> 30 يومًا </span> </div>
.jzrqdiv {الموضع: النسبي ؛ أعلى: 15 بكسل ؛ الارتفاع: 10 بكسل ؛ الحدود الحدودية: 20 بكسل ؛ الخلفية: #efefef ؛ Box-Shadow: Inset 0 1px 2px RGBA (0،0،0 ، .15) ؛ } 2 #scroll_track {position: absolute ؛ أعلى: 0 ؛ الارتفاع: 10 بكسل ؛ الحدود الحدودية: 20 بكسل ؛ الخلفية: #2399dc ؛ z-index: 10 ؛} 3 .Spirit {الموضع: absolute ؛ أعلى: -9px ؛ العرض: 30 بكسل ؛ الارتفاع: 30px ؛ خط الارتفاع: 30 بكسل ؛ حجم الخط: 30px ؛ الحدود-راديوس: 50 ٪ ؛ اللون: #DDD ؛ الخلفية: #ffff ؛ z-index: 11 ؛ التحويل: ترجمة (0،0) ؛}ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.