Javascript 启动暂停和恢复的计时器

我用这个插件来计时 而且最适合我的需要。但总是在这里，但是：D

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

$（“.example.stopwatch”）.TimeCircles({
“动画”：“平滑”，
“背景宽度”：1.2，
“fg_宽度”：0.1，
“圆形背景颜色”：“#60686F”，
“开始”：错误，
“时间”：{
“天”：{
“文本”：“天”，
“颜色”：“FFCC66”，
“秀”：真的吗
},
“小时数”：{
“文本”：“小时”，
“颜色”：“#99CCFF”，
“秀”：真的吗
},
“会议记录”：{
“文本”：“分钟”，
“颜色”：“BBFFBB”，
“秀”：真的吗
},
“秒”：{
“文本”：“秒”，
“颜色”：“FF9999”，
“秀”：真的吗
}
}
});
$（“.start”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.start（）；
});
$（“.stop”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.stop（）；
});
$（“.restart”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.restart（）；
});
/**
*此元素是在目标元素内创建的
*使用它是为了不需要修改您自己的元素
**/
.时间循环{
位置：相对位置；
宽度：100%；
身高：100%；
}
/**
*这是用于容纳所有使用的文本的所有元素
*在时间循环中
**/
.time_circles>div{
位置：绝对位置；
文本对齐：居中；
}
/**
*标题（天、小时等）
**/
.time_circles>div>h4{
边际：0px；
填充：0px；
文本对齐：居中；
文本转换：大写；
字体系列：“世纪哥特式”，Arial；
}
/**
*时间编号，即：12
**/
.time_circles>div>span{
显示：块；
宽度：100%；
文本对齐：居中；
字体系列：“世纪哥特式”，Arial；
字体大小：300%；
边缘顶部：0.4em；
字体大小：粗体；
}

开始
停止
重新启动
你知道它是计时器而不是秒表吗？它倒计时到某个给定的时间

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

摘自插件文档

TimeCircles是一个jQuery插件，它为
要么朝某个时间倒计时，要么从某个时间开始倒计时
一定时间。TimeCircles的目标是提供一个简单的
动态工具，使它非常容易为游客提供一个有吸引力的
倒计时或定时器

因此，您需要的是一个秒表

编辑1:（感谢您对数据计时器的评论）为了使其成为一个权宜之计，您需要使用
data timer=“0”
而不是
data date=“2016-07-20 00:00:00”

下面是一个工作演示


$（“.example.stopwatch”）.TimeCircles({
“动画”：“平滑”，
“背景宽度”：1.2，
“fg_宽度”：0.1，
“圆形背景颜色”：“#60686F”，
“开始”：错误，
“时间”：{
“天”：{
“文本”：“天”，
“颜色”：“FFCC66”，
“秀”：真的吗
},
“小时数”：{
“文本”：“小时”，
“颜色”：“#99CCFF”，
“秀”：真的吗
},
“会议记录”：{
“文本”：“分钟”，
“颜色”：“BBFFBB”，
“秀”：真的吗
},
“秒”：{
“文本”：“秒”，
“颜色”：“FF9999”，
“秀”：真的吗
}
}
});
$（“.start”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.start（）；
});
$（“.stop”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.stop（）；
});
$（“.restart”）。单击（函数（）{
$（“.example.stopwatch”）.TimeCircles（）.restart（）；
});
/**
*此元素是在目标元素内创建的
*使用它是为了不需要修改您自己的元素
**/
.时间循环{
位置：相对位置；
宽度：100%；
身高：100%；
}
/**
*这是用于容纳所有使用的文本的所有元素
*在时间循环中
**/
.time_circles>div{
位置：绝对位置；
文本对齐：居中；
}
/**
*标题（天、小时等）
**/
.time_circles>div>h4{
边际：0px；
填充：0px；
文本对齐：居中；
文本转换：大写；
字体系列：“世纪哥特式”，Arial；
}
/**
*时间编号，即：12
**/
.time_circles>div>span{
显示：块；
宽度：100%；
文本对齐：居中；
字体系列：“世纪哥特式”，Arial；
字体大小：300%；
边缘顶部：0.4em；
字体大小：粗体；
}

开始
停止
重新启动
是，它正在按预期工作……例如。2小时20分钟20秒单击2小时50分钟10秒暂停20分钟后单击继续需要与之前相同2小时50分钟10秒不显示我3小时10分钟20秒不工作，因为我想尝试暂停30秒，单击开始后我现在看到问题。是的，我知道。那么，你能提供类似的东西，这将为我的建议工作吗？thanks@ViktorD我可以想办法解决这个问题。我会更新我的答案。如果你对此有一些实现，那就太好了。谢谢大家，如果我使用data timer=“1200”，我会找到解决方案，但我需要对脚本进行更改，使计时器上升，而不是下降。动画也需要向上，不要反向。“我想你明白我想做什么了。”维克托德感谢
数据计时器
的提示。这在设置为0时起作用