我有一个倒计时为0的脚本,然后重新启动 - 每次都替换一个图像。
问题是,在计时器第一次完成后,它会再次启动,但是两组数字之间的“:”会丢失其造型css并变得微小和黑色(并将某些东西移出过程)我不确定这个问题的来源,但如果有人能看看我的代码并看看如何解决这个问题,我会很高兴。
在:
后:
CODE:
<div id="counter_2" class="counter">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
<!-- Replace image start -->
<!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
$(document).ready(function() {
// The jquery code for constructing and starting the counter
// has been wrapped inside a function so we can call it whenever we want to
function startCounter(imageLoader){
$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ callback(imageLoader) },
format: 'mm:ss'
})
//Loads a new image right when the page loads
$('#image').attr('src', imageLoader.nextImage())
}
// Takes care of whatever need to be done everytime
function callback(imageLoader){
// Replace image
$('#image').attr('src', imageLoader.nextImage());
// Clear the finished counter, so a new can be constructed in its place
$('#counter_2').empty();
// Construct a new counter and starts it
startCounter(imageLoader);
}
function ImageLoader(images) {
this.images = images;
this.usedIndexes = {};
this.displayedCount = 0;
}
ImageLoader.prototype.nextImage = function () {
var self = this,
len = self.images.length,
usedIndexes = self.usedIndexes,
lastBatchIndex = self.lastBatchIndex,
denyLastBatchIndex = self.displayedCount !== len - 1,
index;
if (this.displayedCount === len) {
lastBatchIndex = self.lastBatchIndex = self.lastIndex;
usedIndexes = self.usedIndexes = {};
self.displayedCount = 0;
}
do {
index = Math.floor(Math.random() * len);
} while (usedIndexes[index] || (lastBatchIndex === index && denyLastBatchIndex));
self.displayedCount++;
usedIndexes[self.lastIndex = index] = true;
return self.images[index];
};
// Fill in images in this array
imageLoader = new ImageLoader(['img/wallpapers/2.jpg', 'img/wallpapers/3.jpg', 'img/wallpapers/4.jpg',
'img/wallpapers/5.jpg', 'img/wallpapers/6.jpg', 'img/wallpapers/7.jpg', 'img/wallpapers/9.jpg',
'img/wallpapers/10.jpg', 'img/wallpapers/11.jpg', 'img/wallpapers/12.jpg', 'img/wallpapers/13.jpg',
'img/wallpapers/14.jpg', 'img/wallpapers/15.jpg', 'img/wallpapers/16.jpg', 'img/wallpapers/17.jpg',
'img/wallpapers/18.jpg', 'img/wallpapers/19.jpg', 'img/wallpapers/20.jpg', 'img/wallpapers/21.jpg',
'img/wallpapers/22.jpg', 'img/wallpapers/23.jpg', 'img/wallpapers/24.jpg', 'img/wallpapers/25.jpg',
'img/wallpapers/26.jpg', 'img/wallpapers/27.jpg', 'img/wallpapers/28.jpg', 'img/wallpapers/29.jpg',
'img/wallpapers/30.jpg', 'img/wallpapers/31.jpg', 'img/wallpapers/32.jpg', 'img/wallpapers/33.jpg',
'img/wallpapers/34.jpg', 'img/wallpapers/35.jpg', 'img/wallpapers/36.jpg', 'img/wallpapers/37.jpg',
'img/wallpapers/38.jpg', 'img/wallpapers/39.jpg', 'img/wallpapers/40.jpg', 'img/wallpapers/41.jpg']);
// Set everything off! (Construct a new counter and starts it)
startCounter(imageLoader);
});
</script>
<style type="text/css">
div.counter{
font-size: 54px;
color: white;
margin: 10px 7px;
}
</style>
</div>
谢谢!