Question

我有一个来自jQuery-UI的带有日期值的滑块。我想要的是添加一个具有自动播放功能的按钮。会使滑杆自动移动1天并在滑杆结束时停止的操作。

这是HTML

<input type="text" id="date-slider-1" size="100">
<button id="slider-1-autoplay">Autoplay</button>
<p></p>
<div id="slider-range"></div>

这是jQuery代码

$("#slider-range").slider({
  min: new Date('2019.05.01').getTime() / 1000,
  max: new Date('2019.07.31').getTime() / 1000,
  step: 86400,
  value: new Date('2019.05.27').getTime() / 1000,
  slide: function(event, ui) {
    $("#date-slider-1").val(new Date(ui.value * 1000).toDateString());
  }
});
$("#date-slider-1").val(new Date($("#slider-range").slider("value") * 1000).toDateString());


var slider1Autoplay = false;
var minDate = new Date('2019.05.01').getTime() / 1000;
var maxDate = new Date('2019.07.31').getTime() / 1000;

$("#slider-1-autoplay").on("click", function() {

  slider1Autoplay = (slider1Autoplay) ? false : true;
  while (slider1Autoplay) {
    var curDate = new Date(jQuery("#date-slider-1").val());
    var nextDate = new Date(curDate.setDate(curDate.getDate() + 1));

    slider1Autoplay = (nextDate.getTime() / 1000 > maxDate) ? false : true;

    setTimeout(function() {
      jQuery("#date-slider-1").val(new Date(nextDate).toDateString());
      jQuery("#slider-range").val(new Date(nextDate).toDateString());
    }, 1000);
  }

})

问题在于，每当我单击“自动播放”时，浏览器就会冻结，我需要关闭并打开它。通过调试，我发现curDate变量始终相同。没有更新。

您可以在https://jsfiddle.net/brsn1ohm/7/

处查看代码

Answer 1

请考虑以下内容。

示例：https://jsfiddle.net/Twisty/2g957zwa/64/

JavaScript

$(function() {
  var format = "yy.mm.dd";
  var minDate = "2019.05.01";
  var maxDate = "2019.07.31";

  function formatDate(str) {
    var yy = str.slice(0, 4);
    var mm = str.slice(5, 7);
    var dd = str.slice(8);
    var f = yy + "-" + mm + "-" + dd;
    console.log("Format:", f);
    return f;
  }

  function strToDate(f, str) {
    return $.datepicker.parseDate(f, str);
  }

  function dateToStr(f, dt) {
    return $.datepicker.formatDate(f, dt);
  }

  function calcDayDiff(a, b) {
    var d1 = Date.parse(formatDate(a)),
      d2 = Date.parse(formatDate(b)),
      tdf = Math.abs(d2 - d1),
      ddf = Math.ceil(tdf / (1000 * 3600 * 24));
    console.log("Calc:", a, b, d1, d2, tdf, ddf);
    return ddf;
  }

  function addDays(dt, d) {
    var nt = d * (1000 * 3600 * 24);
    var ndt = new Date(dt.getTime() + nt);
    console.log("Add:", dt, d, nt, ndt);
    return ndt;
  }

  function dateToSeconds(dStr) {
    var dt = new Date(dStr);
    return dt.getTime() / 1000;
  }

  $("#slider-range").slider({
    min: 0,
    max: calcDayDiff(minDate, maxDate),
    step: 1,
    value: calcDayDiff(minDate, "2019.05.27"),
    slide: function(event, ui) {
      var dtv = addDays(strToDate(format, minDate), ui.value);
      $("#date-slider-1").val(dateToStr(format, dtv));
    }
  });

  var sdtv = addDays(strToDate(format, "2019.05.01"), $("#slider-range").slider("value"));
  $("#date-slider-1").val(dateToStr(format, sdtv));

  var slider1Autoplay = false;
  var intv;

  console.log("Init: ", slider1Autoplay, $("#slider-range").slider("value"));

  $("#slider-1-autoplay").on("click", function() {
    slider1Autoplay = (slider1Autoplay) ? false : true;
    if (slider1Autoplay == false) {
      clearInterval(intv);
    }
    intv = setInterval(function() {
      var cv = $("#slider-range").slider("value");
      var sdtv = addDays(strToDate(format, minDate), ++cv);
      $("#slider-range").slider("value", cv);
      $("#date-slider-1").val(dateToStr(format, sdtv));
    }, 1000);
  });
});

希望有帮助。

使jQuery-ui滑块自动滑动日期值

1 个答案: