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

Answer 2

您正在分享变量t，tNoMs，hexTime。而且，最重要的是element和opt！我已将其隐藏在newClock()方法中。所以这应该有效：

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
    (function( $ ) {
      $.fn.newClock = function ( options ) {

        var t, tNoMs, hexTime, element; // here we making this variables local to current jQuery object

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

        // opt must be local too
        var opt = $.extend({
          ms: false,
          type: 'classic'
        }, options );

        element = this; //you don't need here $(this)

        var timer = 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() {
        $('#c1').newClock({type: 'classic'});
        $('#c2').newClock({type: 'hex'});
    });
</script>
</head>
<body>
<div id="c1"></div>
<div id="c2"></div>
</body>
</html>

时钟插件jQuery

2 个答案: