3

i'm coding a jquery clock plugin, it works correctly but i can't have more than 1 clock for page, the old version works correctly with infinite numbers of clock for page, but is not a JQ plugin, so whats wrong?

New code:

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

Old version:

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

Thanks in advance..

0

2 Answers 2

3

your are sharing your javascript variables as global that are overwriting each other.

$.fn.newClock = function ( options ) {

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

    var element = $(this);
1

You are sharing variables t, tNoMs, hexTime. And, the most important, element and opt! I've hide it in the newClock() method. So this should work:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.