Question

我试图根据滑块位置显示相应的日期。此滑块自动运行直到结束并显示当前日期。所以，问题是当我向后滑动它没有显示适当的日期。有什么帮助吗？

这是完整的代码！

   <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
 <link rel="stylesheet" href="css/jquery-ui.css">
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script>

    var i = 1, k = 1;
    var isPaused = false;
    var eventNum=0;
    var inter;
    var ar = [];
    function startSlider(interval, seconds) 
    {  
    var seconds = seconds*1000;
    var tmp = interval; 
    var st = Math.ceil(1000/interval);
    inter = setInterval(function()
    {     
             $( "#slider" ).slider(
             {    
               range: "min",
               max:1000,
               slide: function()
               {
                 if (isPaused)
                  {
                     i=$(this).slider("value")+1;
                  }
                  else
                  {
                    alert("Pause to slide!");
                  }
               }
             });
         if(!isPaused)
         {

             if(k%st == 0)
                {
                   setDate(++eventNum);
                   ar[eventNum] = $("#slider").slider("value");
                   k = 1;
                   if (eventNum==interval)
                     {
                       clearInterval(inter);
                       while(i!=1000){
                         $("#slider").slider("value",i++);
                       }
                     }
                }
             k++;
           $("#slider").slider("value",i++);
          }

      },seconds/st);
     }
      function pause(){
      isPaused = true;
      }

    function play(){
    clearInterval(inter);
    var d1 = document.getElementById("date1").value;
    document.getElementById("date").value = d1;
    startSlider(dateDifference(), document.getElementById("time").value);
    isPaused = false;
    }

    function stop(){  
    eventNum = 0;
    i = 0;
    clearInterval(inter);
    var d1 = document.getElementById("date1").value;
    document.getElementById("date").value = d1;
    $("#slider").slider("value",0);
    }

    function set(){
    i=$("#slider").slider("value")+1;
    $("#slider").slider("value",i++);
    }

    function dateDifference(){
    var d1 = new Date(document.getElementById("date1").value);
    var d2 = new Date(document.getElementById("date2").value);
    var timeDiff = Math.abs(d2.getTime() - d1.getTime());
    return difDays = Math.ceil(timeDiff/(1000*3600*24));
    }

     function setDate(n){
     var d1 = new Date(document.getElementById("date1").value);
     d1.setDate(d1.getDate() + n);
     var d2 = d1.toISOString().substr(0,10);
     document.getElementById("date").value = d2;
    }

    $(function() {
     $("#date1").on("change",function(){
        var selected = $(this).val();
        document.getElementById("date2").setAttribute("min",selected);
     });
    });

    $("slider").mouseup(function(){
    $(this).after("Mouse button released.");
    });

    </script>
    </head>
    <body>

     <div>
     <label for="from">From</label>
     <input type="date" name="date1" id="date1" >
     <label for="to">to</label>
     <input type="date" name="date2" id="date2" min="">
     <label for="time">Time</label>
     <input type="text" name="time" id="time">
     <input type="text" name="date" id="date">
     </div>
     <br>
     <div id="slider" ></div>
    <br>
    <button onclick="pause()">pause</button> 
    <button onclick="play()">play</button>
    <button onclick="stop()">stop</button>

    </body>
</html>

用于显示日期间隔的JQuery滑块

0 个答案: