Question

我使用此插件定时器https://github.com/wimbarelds/TimeCircles 并且最适合我的需要。但总是在这里但是：D

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

＆＃13;

$(".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();
});

＆＃13;

/**
 *	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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你是否意识到它的定时器和非停止监视它会在某个给定时间内倒计时。

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

取自插件文档

TimeCircles是一个jQuery插件，提供了一个很好看的方式要么倒计时到某个时间，要么从a倒数一定时间。 TimeCircles的目标是提供一个简单的动态工具，使访客很容易吸引人倒计时或计时器。

所以你要求的是秒表

编辑1 :(感谢您对数据计时器的评论）为了使其成为停止使用，您需要使用data-timer="0"代替data-date="2016-07-20 00:00:00"

以下是一个有效的演示

＆＃13;

$(".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();
});

＆＃13;

/**
 *	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;
}

＆＃13;

<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>

＆＃13;

定时器开始暂停和恢复

1 个答案: