此处输入了三个时区范围的巴基斯坦,阿富汗和印度 这里的时区偏移量以秒为单位
location offset seconds
pakistan 18000
afghanistan 16200
indian 19800
输入范围1到24小时
当我单击任何输入时,范围将根据其时区显示所有时间。
但是问题是当我单击阿富汗或印度输入时间范围时,它返回错误的时间。 当我单击结束输入范围(平均24小时)时,它会比原始值落后30分钟
$("#comission div").on("click", "input", function() {
var value = parseInt($(this).val())
var hours1 = Math.floor(value / 60);
var minutes1 = value - (hours1 * 60);
var targetTime = new Date(0);
targetTime.setMinutes(minutes1);
targetTime.setHours(hours1);
if (value > 1430) {
targetTime.setMinutes(59);
targetTime.setHours(23)
}
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
$('#comission .time').each(function() {
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
var tzDifference = (parseInt(timeZoneFromDB) / 60) + targetTime.getTimezoneOffset();
var date = new Date(targetTime.getTime() + tzDifference * 60000);
var totallv = parseInt(date.getHours() * 60) + date.getMinutes();
$(this).find('.tooltip').css('margin-left', totallv / 3);
$(this).find('.tooltip').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.comissionLabel').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.custom-range').val(totallv)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<br><br><br> <br><br><br>
<div id="comission" class="col-md-6 col-md-offset-2">
<div class="col-md-12 mb-3 44 time">afghanistan
<span class="comissionLabel" data-offset='16200'>time: </span>
<input class="custom-range" value="60" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 45 time"> Pakistan
<span class="comissionLabel" data-offset='18000'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 46 time">indian
<span class="comissionLabel" data-offset='19800'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
</div>
</div>