javascript - 时钟插件 jQuery

Question

我正在编写一个 jquery 时钟插件，它可以正常工作，但我的页面时钟不能超过 1 个，旧版本可以正常工作，页面的时钟数量不限，但不是 JQ 插件，那又怎样错了吗？

新代码:

(function( $ ) {
  function time() {
    d = new Date();
    day = {
      h: d.getHours(),
      m: d.getMinutes(),
      s: d.getSeconds(),
      ms: d.getMilliseconds()
    };

    function check(i) {
      if (i < 10) {i = "0" + i;}
      return i;
    }

    day.h = check(day.h);
    day.m = check(day.m);
    day.s = check(day.s);

    t = day.h + ":" + day.m + ":" + day.s + ":" + day.ms;
    tNoMs = day.h + ":" + day.m + ":" + day.s;
    hexTime = '#' + day.h + '' + day.m + '' + day.s;
  }

  $.fn.newClock = function ( options ) {

    opt = $.extend({
      ms: false,
      type: 'classic'
    }, options );

    element = $(this);

    setInterval(function () {
      time();
      switch (opt.ms) {
        case true:
          time();
          element.html(t);
          break;
        case false:
          switch (opt.type) {
            case 'classic':
              time();
              element.html(tNoMs);
              break;
            case 'hex':
              time();
              element.html(hexTime);
              break;
          }
          break;
      }
    }, 1);
  };
} ( jQuery ) );

旧版本:

function Clock() {
  function temp() {
    d = new Date();
    day = {
      h: d.getHours(),
      m: d.getMinutes(),
      s: d.getSeconds(),
      ms: d.getMilliseconds()
    };

    day.h = check(day.h);
    day.m = check(day.m);
    day.s = check(day.s);
    day.ms = check(day.ms);

    function check(i) {
      if (i < 10) {i = "0" + i;}
      return i;
    }

    t = day.h + ":" + day.m + ":" + day.s + ":" + day.ms;
    tNoMs = day.h + ":" + day.m + ":" + day.s;
    hexTime = '#' + day.h + '' + day.m + '' + day.s;
  }

  temp();

  this.new = function (selector, tf, type) {
    function getStatus(variable) {
      if (variable === true) {
        return variable;
      } else {
        return variable;
      }
    }
    setInterval(function () {
      temp();
      if (tf === true) {
        $(selector).html(t);
      } else {
        $(selector).html(tNoMs);
      }

      if (type === true) {
        $(selector).html(hexTime);
      }
    }, 1);
  };
}

提前致谢..

Answer 1

您正在将您的 javascript 变量共享为全局变量，这些变量会相互覆盖。

$.fn.newClock = function ( options ) {

    var opt = $.extend({
      ms: false,
      type: 'classic'
    }, options );

    var element = $(this);