Question

我（一个javascript新手）希望在一个页面中拥有具有不同时间值的多个时钟。我设法让时钟运行，但如果我添加第二个时钟，则只显示一个时钟。在控制台中，打印两个具有正确（不同）时间的ID。

(function($, undefined) {
$.fn.clock = function(currentTime) {

    return this.each(function() {
        var localTime = +Date.now();
        var timeDiff = currentTime - localTime;

        updateClock = function (self, diff) {

            var realtime = +Date.now() + diff;
            var date = new Date(realtime);

            var hours = date.getHours();
            if(hours < 10) hours = "0"+hours;

            var minutes = date.getMinutes();
            if(minutes < 10) minutes = "0"+minutes;

            var seconds = date.getSeconds();
            if(seconds < 10) seconds = "0"+seconds;

            var day = date.getDate();

            var month = date.getMonth()+1;

            var year = 1900 + date.getYear();

            if(day < 10) day = "0"+day;

            if(month < 10) month = "0"+month;

            var formattedTime = day + '.' + month + '.' + year + ' ' + hours + ':' + minutes + ':' + seconds;

            self.text(formattedTime);
            console.log(self.attr("id")+":"+formattedTime);
            setTimeout(function() {updateClock(self, diff)}, 1000);
        };

        updateClock($(this), timeDiff);

    });

};

return this;

})(jQuery);

调用（以ms为参数）：

<script type="text/javascript">
    $(document).ready(function() {
        $("#clock").clock(123456789);
        $("#clock2").clock(1234567899);
    });
</script>

clock和clock2是空div 问题：只有clock2（最后一个初始化时钟）显示时间。

编辑：

的DIV：

<div id="clock"/>
<div id="clock2"/>

EDIT2：它现在正在工作。 div需要一个结束标记。

Answer 1

updateClock是一个implicitly global变量。添加var或将其设为

function updateClock(self, diff) {

正确定位功能。

Answer 2

Div必须有结束标记

Tag omission None, both the starting and ending tag are mandatory.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

<div id="clock"></div>
<div id="clock2"></div>

jQuery在一个页面中有多个时钟

2 个答案: