我是引导程序的新手。现在我正在做一个在线考试项目。所以我需要那个项目的计时器。我正在使用引导程序以获得最佳响应式布局，并且我正在使用此站点的http://jsfiddle.net/KzrwQ/1时间计数器以获得最佳结果。但是，不幸的是，我的基于 java 脚本的时间计数器无法正常工作。我的问题是倒计时没有加载到该按钮字段中，只是“加载...”只显示没有其他计时器不显示。我想要这个输出“正在加载... 1 2 3 4 5 6 7 8 9 10 continue ”。所以请帮忙解决。下面我将附上我的代码，请参考 it.it，这是我的演示代码，结果无效。http://jsfiddle.net/jobvirus/nFhr4/embedded/result/ 谢谢！
<!DOCTYPE html>
<html>
<head><title>online test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="#" class="brand">responsive</a>
<div class="nav-collapse collapse pull-right">
<button type="button" id="continue" class="button red btn btn-primary">Loading...</button>
</div>
</div>
</div>
</div>
<div class="hero-unit">
<h1>Here is the head line</h1>
<p>Ever</p>
<p><a href="#" class="btn btn-primary btn-large" >get start</a></p>
</div>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo $config['base_url']; ?>js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="js/jquery.countTo.js"></script> <! get jquery.countTo.js from here http://jsfiddle.net/KzrwQ/1/ >
<script src="js/bootstrap.js"></script>
<script>
jQuery(document).ready(function ($) {
$('#continue').countTo({
interval: 1000,
startNumber: 10,
endNumber: 0,
onLoop: function (self, current, loop) {
$(self).text('Wait: ' + current);
},
onFinish: function (self, current, loop) {
self.removeClass('red').addClass('green');
$(self).html('continue').on('click', function () {
top.location = '<?php echo('next.html'); ?>';
});
}
});
});
</script>
</body>
</html>
下面的代码是 jquery.countTo.js 的完整版本
/**
* countdown timer with some configuration
*
* @version 0.1
* @url http://jsfiddle.net/KzrwQ/1/
* @date 2011/09/02
* @author Conrad 'bartrail' Barthelmes
* @licence MIT
*
* usage:
*
* $('selector').countTo({
* interval: 1000, // miliseconds the interval is repeated (aka speed)
* startNumber: 10, // start from 10 or any other integer
* endNumber: 0, // end at 0 or any other integer
*
* onLoop: function(self, current, loop) { // fired on every loop
* self; // the fetched element
* current; // current number of interval
* loop; // finished loops
*
* // default behaviour:
* $(self).text(current);
* },
*
* onStart: function(self) { // fired on the beginning
* self; // the fetched element
* },
*
* onFinish: function(self, current, loop) { // fired when finished
* self; // the fetched element
* current; // current number of interval
* loop; // finished loops
* }
* });
*
*/
jQuery.fn.countTo = function(options) {
if(this.length == 0) {
return;
}
// save reference to self
var self = this;
// merge optoins
self.options = {};
jQuery.extend(true, self.options, {
interval : 1000,
startNumber: 10,
endNumber : 0,
onLoop : function(self, current, loop) {
$(self).text(current);
},
onStart : function(self) {},
onFinish : function(self, current, loop) {}
}, options);
// init the start number
self.current = self.options.startNumber;
// get the direction, true is 'down', false is 'up'
self.direction = self.options.startNumber > self.options.endNumber ? true : false;
// the current iteration
self.loop = 0;
// whether is finished or not
self.finished = false;
// the timing function
self.timer = function(self) {
self.intervalId = setInterval(self._interval, self.options.interval)
}
self._interval = function() {
self.options.onLoop(self, self.current, self.loop);
// going down
if(self.direction) {
if(self.current > self.options.endNumber) {
self.current--;
}else{
self.finished = true;
}
// going up
}else{
if(self.current < self.options.endNumber) {
self.current++;
}else{
self.finished = true;
}
}
// clear interval and fire onFinish when finished
if(self.finished) {
clearInterval(self.intervalId);
self.options.onFinish(self, self.current, self.loop)
}
self.loop++;
}
self.start = function(self) {
self.options.onStart(self);
self.timer(self);
}
self.start(self);
}