这是我正在创建的计时器类型的图像。发布图像需要10个声誉,因此它不会出现。有人请编辑此问题以显示图像。
到目前为止,这是我的代码
<script>
$(document).ready(function(){
var timer = null,
startTime = null,
progress = $("#progress").shieldProgressBar({
min: 0,
max: 1500,
value: 1500,
layout: "circular",
layoutOptions: {
circular: {
width: 10,
borderWidth: 0,
color: "#f37a5d"
}
},
text: {
enabled: true,
template: '<span style="font-size:20px;">{0:n}</span>'
},
reversed: true,
}).swidget();
$(".icon-clock").shieldButton({
events: {
click: function () {
clearInterval(timer);
startTime = Date.now();
timer = setInterval(updateProgress, 100);
}
}
});
$(".pause_btn").shieldButton({
events: {
click: function () {
clearInterval(timer);
}
}
});
function updateProgress() {
var remaining = 1500 - (Date.now() - startTime) / 1000;
progress.value(remaining);
if (remaining <= 0) {
clearInterval(timer);
}
}
stopwatch = $("#progress").shieldProgressBar({
min: 0,
max: 3600,
value: 0,
layout: "circular",
layoutOptions: {
circular: {
width: 10,
borderWidth: 0,
color: "#f37a5d"
}
},
text: {
enabled: true,
template: '<span style="font-size:20px;">{0:n}</span>'
},
}).swidget();
$(".icon-stopwatch").shieldButton({
events: {
click: function () {
clearInterval(timer);
startTime = Date.now();
timer = setInterval(updatestopwatch, 100);
}
}
});
$(".pause_btn").shieldButton({
events: {
click: function () {
clearInterval(timer);
}
}
});
function updatestopwatch() {
var remaining = (Date.now() - startTime) / 1000;
stopwatch.value(remaining);
if (remaining >= 3600) {
clearInterval(timer);
}
}
});
这是我显示此计时器的代码
<li ><a href="#" class="dropdown-toggle icon-plus" data-toggle="dropdown">
<span data-placement="bottom" title="Show Timer">+ Timer </span></a>
<ul class="dropdown-menu timer-wrapper" style="
padding: 5px;">
<div class="btn-group">
<button title="" type="button" class="btn btn-default b_fix icon-stopwatch" onclick="start(0);" data-original-title="Stopwatch"></button>
<button title="" type="button" class="btn btn-default b_fix icon-clock" onclick="start(1);" data-original-title="Timer"></button>
</div>
<div class = "time_div form-control">
<span id="time" class="form-control">00:00:00</span>
<span id="timeelapsed" class="form-control">00:00:00</span>
<div class = "progress_div">
<div id = "progress">
</div>
</div>
</div>
我读到了这个答案 Bootstrap dropdown disappears on input select 和其他一些人但不能弄明白任何帮助都会受到赞赏。