时钟插件 jQuery

Clock plugin jQuery

本文关键字：jQuery 插件 时钟      更新时间：2023-09-26

我正在编写一个 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);
  };
}

提前谢谢..

你正在将你的JavaScript变量共享为全局变量，这些变量正在相互覆盖。

$.fn.newClock = function ( options ) {
    var opt = $.extend({
      ms: false,
      type: 'classic'
    }, options );
    var element = $(this);

您正在共享变量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>
相关文章：