Clock plugin jQuery

Question

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

score 3 · Answer 1 · answered Jul 09 '16 at 19:15

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

answered Jul 09 '16 at 19:15

Steve

1,995
2
16
25

spirit · Accepted Answer · 2016-07-09T19:58:20.280

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>

Clock plugin jQuery

2 Answers2