Question

我正在使用SlickSlider（仅用于UI / UX）来添加或休息时间作为Tachymetre。

基础很简单：

2个具有不同时间值的SlickSliders。
1 DIV元素，显示依赖于滑块的总时间。

复杂的部分使这变得真实。我几乎不知道jQuery和JavaScript，但我不知道如何搞乱时间值（如3600秒，总分钟等）。

这是我到目前为止所得到的：

$(document).ready(function(){

  var TimeTotal = "00:00:000"; //min:sec:dec
  
  $('.slider-a').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: false,
  fade: false
  });
  
  $('.slider-b').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: false,
  fade: false
  });
  
  function evaluateChecked () {
        if ($("this slider-a").is('active')) {
            TimeTotal = Number(TimeTotal) + Number($(this slider).val());
            $('.total').text("Total: " + TimeTotal);
        } else {
            TimeTotal = Number(TimeTotal) - Number($(this slider).val());
            $('.total').text("Total: " + TimeTotal);
          }
        });
  function evaluateChecked () {
        if ($("this slider-b").is('active')) {
            TimeTotal = Number(TimeTotal) + Number($(this slider).val());
            $('.total').text("Total: " + TimeTotal);
        } else {
            TimeTotal = Number(TimeTotal) - Number($(this slider).val());
            $('.total').text("Total: " + TimeTotal);
          }
        });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" />

<div class="slider-a">
  Set Timer at:
  <div>
    <h1 class="index-header" value="01:21:950">Slide A1</h1>
  </div>
  <div>
    <h1 class="index-header" value="01:56:250">Slide A2</h1>
  </div>
  <div>
    <h1 class="index-header" value="00:40:750">Slide A3</h1>
  </div>
</div>

plus/minus:

<div class="slider-b">
  <div>
    <h1 class="index-header" value="-00:30:000">Slide B1</h1>
  </div>
  <div>
    <h1 class="index-header" value="01:00:000">Slide B2</h1>
  </div>
  <div>
    <h1 class="index-header" value="00:00:400">Slide B3</h1>
  </div>
</div>

<div class="total"></div>

我知道我犯了这个错误，不要因为我正在学习这个问题。非常感谢您的帮助！

使用SlickSlider进行复杂的加/减时间

0 个答案: