0

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

问题是，在计时器第一次结束后，它又开始了，但是两组数字之间的“：”失去了它的样式 css，变得又小又黑（并且在这个过程中把一些东西移到了不合适的位置）我'不确定这个问题来自哪里，但如果有人可以查看我的代码并了解如何解决此问题，我会很高兴。

前：

在此处输入图像描述

后：

在此处输入图像描述

代码：

<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>

谢谢！

4

0 回答 0