jQuery进度条样式倒计时计时器
jQuery Progress Bar Style Countdown timer
我正在做一个项目,当我点击按钮时,进度条会启动一段时间,通常是30到60秒。这个进度条是在jquery中制作的,这个页面上有演示http://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/
我已经在我的项目中实现了这一点,因为它完全符合我的需求。现在我需要做的是,当计时器完成"进度条"answers"do it!"时,应该自动隐藏并显示另一个元素,比如验证码。由于jquery还有一周的时间,我不知道该怎么做。这是我的代码以及"进度条脚本"的代码。
我的页面:
<!-- AD TIMER -->
<div>
<input type="hidden" id="restTime" value="<?php echo $ad_timer; ?>" disabled style="width: 50px; margin-left: 350px; margin-top: -70px; text-indent:10px" />
<button id="startProgressTimer" style="margin-top: -65Mpx; height: 45px; width: 90px; margin-left: 430px;">START</button>
<div id="progressTimer" style="width:400px; margin-left: 530px; margin-top: -34px"></div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="css/jquery.progressTimer.js"></script>
<script>
$("#startProgressTimer").click(function() {
$("#progressTimer").progressTimer({
timeLimit: $("#restTime").val()
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
<!-- AD TIMER END -->
jquery.progressTimer.js
(function ($) {
$.fn.progressTimer = function (options) {
var settings = $.extend({}, $.fn.progressTimer.defaults, options);
this.each(function () {
$(this).empty();
var barContainer = $("<div>").addClass("progress active progress-striped");
var bar = $("<div>").addClass("progress-bar").addClass(settings.baseStyle)
.attr("role", "progressbar")
.attr("aria-valuenow", "0")
.attr("aria-valuemin", "0")
.attr("aria-valuemax", settings.timeLimit);
bar.appendTo(barContainer);
barContainer.appendTo($(this));
var start = new Date();
var limit = settings.timeLimit * 1000;
var interval = window.setInterval(function () {
var elapsed = new Date() - start;
bar.width(((elapsed / limit) * 100) + "%");
if (limit - elapsed <= 5000)
bar.removeClass(settings.baseStyle)
.removeClass(settings.completeStyle)
.addClass(settings.warningStyle);
if (elapsed >= limit) {
window.clearInterval(interval);
bar.removeClass(settings.baseStyle)
.removeClass(settings.warningStyle)
.addClass(settings.completeStyle);
settings.onFinish.call(this);
}
}, 250);
});
return this;
};
$.fn.progressTimer.defaults = {
timeLimit: 60, //total number of seconds
warningThreshold: 5, //seconds remaining triggering switch to warning color
onFinish: function () {}, //invoked once the timer expires
baseStyle: '', //bootstrap progress bar style at the beginning of the timer
warningStyle: 'progress-bar-danger', //bootstrap progress bar style in the warning phase
completeStyle: 'progress-bar-success' //bootstrap progress bar style at completion of timer
};
}(jQuery));
我应该修改什么以使其工作?请帮助我专家。。!
使用onFinish
事件添加函数以隐藏元素:
$("#startProgressTimer").click(function() {
$("#progressTimer").progressTimer({
timeLimit: $("#restTime").val(),
onFinish: function(){
$('#startProgressTimer').hide();
$('#progressTimer').hide();
}
});
});
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 设置倒计时计时器,IE出现问题
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 倒计时计时器应该持续两个php页面
- 在Jquery倒计时计时器上设置每个数字的动画
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 递归倒计时计时器
- 制作一个按钮倒计时计时器,该计时器将在5分钟后永久禁用,即使在页面刷新时也应保持禁用状态
- 我需要JS/jQuery中的倒计时计时器
- 设置Javascript倒计时计时器的初始值
- JavaScript倒计时计时器不会显示两次
- 如何设置此javascript倒计时计时器的样式
- 如何使用momentjs将澳大利亚/墨尔本时区设置为倒计时计时器
- 如何用JavaScript编写倒计时计时器
- 试图修复一个倒计时计时器问题,该问题导致计时器运行,然后在使用Javascript时崩溃约10秒
- 如何制作倒计时计时器并在时间到时更新MySQL记录
- 如何制作两个倒计时计时器,如果一个开始,另一个会停止
- 创建php/javascript倒计时计时器时出现问题
- 当分钟和秒为0时,倒计时计时器不会减少小时数