ตัวอย่างนี้แชร์รหัสเฉพาะสำหรับ JavaScript เพื่อใช้วันที่เลือกการเลื่อนสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
$ (หน้า) .on ('touchmove', '#touchMoveTime', ฟังก์ชั่น (เหตุการณ์) {touchMove (เหตุการณ์);}); Scrollbarinit (); // เริ่มต้นฟังก์ชั่น scrollbarinit () {var defaultValue = 3, maxValue = 30; var myDate = วันที่ใหม่ (); var year = mydate.getlyear (); var month = mydate.getMonth () + 1; // รับเดือนปัจจุบัน (0-11,0 หมายถึงเดือนมกราคม) วันที่ var = myDate.getDate (); var day = วันใหม่ (ปี, เดือน, 0); var dayCount = day.getDate (); // รับจำนวนวันในเดือนนี้: ถ้า ((วันที่ + defaultValue)> dayCount) {ถ้า (เดือน == 12) {เดือน = 1; ปี = ปี + 1; } else {เดือน = เดือน + 1; } date = (วันที่ + defaultValue) - dayCount; } else {วันที่ = วันที่ + defaultValue; } ถ้า (เดือน <10) {month = "0"+เดือน; } if (วันที่ <10) {date = "0"+วันที่; } $ ("#endtime"). attr ('ค่า', ปี+'-'+เดือน+'-'+วันที่); var currentx = $ ("#touchMoveTime"). width () * (0 / maxValue); $ ('#scroll_track'). css ({width: currentx+"px"}); $ ('#scroll_thumb'). css ({transform: 'translate (' + currentx + 'px, 0)'}); - ฟังก์ชั่น touchmove (เหตุการณ์) {event.preventdefault (); if (! $ ('#scroll_thumb') ||! event.touches.length) return; var defaultValue = 3, maxValue = 30; var myDate = วันที่ใหม่ (); var year = mydate.getlyear (); var month = mydate.getMonth () + 1; // รับเดือนปัจจุบัน (0-11,0 หมายถึงเดือนมกราคม) วันที่ var = myDate.getDate (); var tran_currentx = ''; var startOffset = parseInt ($ ('#touchMoveTime'). OFFSET (). ซ้าย); var endoffset = parseInt ($ ('#touchright'). Offset (). ซ้าย); var _limit = endoffset - startoffset; var touchMoveTimeOffsetLeft = $ ('#scroll_track'). Offset (). ซ้าย; var touch = event.touches [0]; var endx = touch.pagex; var currentx = endx - touchMoveTimeOffsetLeft; var timevalue = math.round (maxValue * (currentx / $ ("#touchmoveTime"). width ())); // ค่าติ๊กปัจจุบันถ้า (timeValue <defaultValue) {timeValue = defaultValue} อื่นถ้า (timeValue> maxValue) {timeValue = maxValue; } if (currentx <_limit && currentx> 15) {$ ('#วัน') ข้อความ (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 (); // รับจำนวนวันของเดือนถ้า ((วันที่ + timeValue)> dayCount) {ถ้า (เดือน == 12) {เดือน = 1; ปี = ปี + 1; } else {เดือน = เดือน + 1; } วันที่ = (วันที่ + timeValue) - dayCount; } else {วันที่ = วันที่ + timeValue; } ถ้า (เดือน <10) {month = "0"+เดือน; } if (วันที่ <10) {date = "0"+วันที่; } $ ('#endtime'). attr ('ค่า', ปี+'-'+เดือน+'-'+วันที่); -<div> <span> 3 วัน </span> <div id = "touchMoveTime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touch right
.JZRQDIV {ตำแหน่ง: ญาติ; ด้านบน: 15px; ความสูง: 10px; แนวชายแดน: 20px; ความเป็นมา: #efefef; Box-shadow: inset 0 1px 2px RGBA (0,0,0, .15); } 2 #scroll_track {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความสูง: 10px; แนวชายแดน: 20px; ความเป็นมา: #2399DC; z-index: 10;} 3 .spirit {ตำแหน่ง: สัมบูรณ์; ด้านบน: -9px; ความกว้าง: 30px; ความสูง: 30px; จุดสูง: 30px; ขนาดตัวอักษร: 30px; แนวชายแดน: 50%; สี: #DDD; ความเป็นมา: #FFFF; z-index: 11; Transform: Translate (0,0);}ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน