jQuery / CSS:首次运行脚本后CSS消失

时间:2013-04-20 23:12:34

标签: javascript jquery html css

我有一个倒计时为0的脚本,然后重新启动 - 每次都替换一个图像。

问题是,在计时器第一次完成后,它会再次启动,但是两组数字之间的“:”会丢失其造型css并变得微小和黑色(并将某些东西移出过程)我不确定这个问题的来源,但如果有人能看看我的代码并看看如何解决这个问题,我会很高兴。

在:

enter image description here

后:

enter image description here

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>

谢谢!

0 个答案:

没有答案