Contoh ini membagikan kode spesifik untuk JavaScript untuk mengimplementasikan tanggal pemilihan geser untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
$ (halaman) .on ('touchmove', '#touchmoVetime', function (event) {touchmove (event);}); scrollbarinit (); // inisialisasi fungsi scrollbarinit () {var defaultValue = 3, maxValue = 30; var mydate = tanggal baru (); var tahun = mydate.getlyear (); var bulan = mydate.getMonth () + 1; // Dapatkan bulan saat ini (0-11,0 mewakili Januari) var tanggal = mydate.getDate (); var hari = tanggal baru (tahun, bulan, 0); var daycount = day.getDate (); // Dapatkan jumlah hari ini bulan ini: if ((tanggal + defaultValue)> daycount) {if (bulan == 12) {bulan = 1; tahun = tahun + 1; } else {bulan = bulan + 1; } date = (date + defaultValue) - daycount; } else {date = defaultValue; } if (bulan <10) {bulan = "0"+bulan; } if (date <10) {date = "0"+date; } $ ("#endtime"). attr ('value', tahun+'-'+bulan+'-'+tanggal); 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) kembali; var defaultValue = 3, maxValue = 30; var mydate = tanggal baru (); var tahun = mydate.getlyear (); var bulan = mydate.getMonth () + 1; // Dapatkan bulan saat ini (0-11,0 mewakili Januari) var tanggal = mydate.getDate (); var tran_currentx = ''; var startoffset = parseInt ($ ('#touchMoVetime'). offset (). Kiri); var endOffset = parseInt ($ ('#touchRight'). Offset (). Kiri); var _limit = endOffset - startOffset; var TouchMoVeTimeOffsetleft = $ ('#scroll_track'). Offset (). Kiri; var touch = event.touches [0]; var endx = touch.pagex; var currentx = endx - touchMoVetimeOffsetLeft; var timevalue = math.round (maxValue * (currentX / $ ("#touchMoVetime"). width ())); // nilai kutu saat ini if (timEvalue <defaultValue) {timeValue = defaultValue} lain jika (timeValue> maxvalue) {timeValue = maxValue; } if (currentX <_limit && currentX> 15) {$ ('#days'). Teks (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 hari = tanggal baru (tahun, bulan, 0); var daycount = day.getDate (); // Dapatkan jumlah hari dalam sebulan jika ((tanggal + timeValue)> daycount) {if (bulan == 12) {bulan = 1; tahun = tahun + 1; } else {bulan = bulan + 1; } date = (date + timeValue) - daycount; } else {date = date + timeValue; } if (bulan <10) {bulan = "0"+bulan; } if (date <10) {date = "0"+date; } $ ('#endtime'). attr ('value', tahun+'-'+bulan+'-'+tanggal); }}<div> <span> 3 hari </span> <div id = "TouchMoVetime"> <Div ID = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touchright"> 30 hari </span> </div>
.jzrqdiv {position: relatif; Atas: 15px; Tinggi: 10px; Border-Radius: 20px; Latar Belakang: #efefef; Kotak-Shadow: Inset 0 1px 2px RGBA (0,0,0, .15); } 2 #scroll_track {position: absolute; TOP: 0; Tinggi: 10px; Border-Radius: 20px; Latar Belakang: #2399DC; z-index: 10;} 3 .spirit {position: absolute; TOP: -9px; Lebar: 30px; Tinggi: 30px; line-height: 30px; font-size: 30px; Border-Radius: 50%; Warna: #ddd; Latar Belakang: #FFFF; z-index: 11; transform: translate (0,0);}Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.