定时器开始暂停和恢复

Question

我正在将此插件用于计时器https://github.com/wimbarelds/TimeCircles 最适合我需要的东西。但总是在这里但是:D

我想让这个计时器更好地工作，就像当我点击暂停来暂停而不是只暂停圆圈的动画以及停止的时间一样。所以这是我的代码

$(".example.stopwatch").TimeCircles({
    "animation": "smooth",
    "bg_width": 1.2,
    "fg_width": 0.1,
    "circle_bg_color": "#60686F",
    "start": false,
    "time": {
        "Days": {
            "text": "Days",
            "color": "#FFCC66",
            "show": true
        },
        "Hours": {
            "text": "Hours",
            "color": "#99CCFF",
            "show": true
        },
        "Minutes": {
            "text": "Minutes",
            "color": "#BBFFBB",
            "show": true
        },
        "Seconds": {
            "text": "Seconds",
            "color": "#FF9999",
            "show": true
        }
    }
});

$(".start").click(function () {
    $(".example.stopwatch").TimeCircles().start();
});
$(".stop").click(function () {
    $(".example.stopwatch").TimeCircles().stop();
});
$(".restart").click(function () {
    $(".example.stopwatch").TimeCircles().restart();
});

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: center;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Century Gothic', Arial;
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Century Gothic', Arial;
    font-size: 300%;
    margin-top: 0.4em;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.js"></script>
    <div class="panel-body">
        <div class="example stopwatch" data-date="2016-07-20 00:00:00" style="width: 100%;"></div>
            
        
        <button class="btn btn-success btn-small start">Start</button>
        <button class="btn btn-danger btn-small stop">Stop</button>
        <button class="btn btn-info btn-small restart">Restart</button>
    </div>

Answer 1

您是否意识到它是一个计时器并且不是秒表它倒计时/计时到某个给定时间。

所以在本例中，您将日期时间指定为2016-07-20 00:00:00，因此当计时器运行时，它会显示到上述日期时间已经过去了多少时间。这意味着无论您何时运行计时器，它都会计算从初始给定日期时间经过的时间量并显示出来。

取自插件文档

TimeCircles 是一个 jQuery 插件，它提供了一个漂亮的方式来 要么倒数到某个时间，要么从一个 一定时间。 TimeCircles 的目标是提供一个简单但 动态工具，可以很容易地为访问者提供有吸引力的 倒计时或计时器。

所以你要的是秒表

编辑 1：（感谢您对 data-timer 的评论）为了使它成为一个 stopwath，您需要使用 data-timer="0" 而不是 data-date="2016-07-20 00:00:00"

下面是一个工作演示

$(".example.stopwatch").TimeCircles({
  "animation": "smooth",
  "bg_width": 1.2,
  "fg_width": 0.1,
  "circle_bg_color": "#60686F",
  "start": false,
  "time": {
    "Days": {
      "text": "Days",
      "color": "#FFCC66",
      "show": true
    },
    "Hours": {
      "text": "Hours",
      "color": "#99CCFF",
      "show": true
    },
    "Minutes": {
      "text": "Minutes",
      "color": "#BBFFBB",
      "show": true
    },
    "Seconds": {
      "text": "Seconds",
      "color": "#FF9999",
      "show": true
    }
  }
});

$(".start").click(function() {
  $(".example.stopwatch").TimeCircles().start();
});
$(".stop").click(function() {
  $(".example.stopwatch").TimeCircles().stop();
});
$(".restart").click(function() {
  $(".example.stopwatch").TimeCircles().restart();
});

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/

.time_circles {
  position: relative;
  width: 100%;
  height: 100%;
}
/**
 *	This is all the elements used to house all text used
 * in time circles
 **/

.time_circles > div {
  position: absolute;
  text-align: center;
}
/**
 *	Titles (Days, Hours, etc)
 **/

.time_circles > div > h4 {
  margin: 0px;
  padding: 0px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Century Gothic', Arial;
}
/**
 *	Time numbers, ie: 12
 **/

.time_circles > div > span {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Century Gothic', Arial;
  font-size: 300%;
  margin-top: 0.4em;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.js"></script>
<div class="panel-body">
  <div class="example stopwatch" data-timer="0" style="width: 100%;"></div>


  <button class="btn btn-success btn-small start">Start</button>
  <button class="btn btn-danger btn-small stop">Stop</button>
  <button class="btn btn-info btn-small restart">Restart</button>
</div>