范围输入字段返回错误结果

时间:2018-12-19 14:12:29

标签: javascript jquery html range

此处输入了三个时区范围的巴基斯坦,阿富汗和印度 这里的时区偏移量以秒为单位

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>

0 个答案:

没有答案