Clock-Plugin jQuery

Ich bin ein jquery Clock-Plugin Codierung, es funktioniert richtig, aber ich kann nicht mehr als 1 Uhr für die Seite haben, funktioniert die alte Version mit unendlich vielen Uhr für Seite, ist aber kein JQ-Plugin , Also, was ist falsch?Clock-Plugin jQuery

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

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

Vielen Dank im Voraus ..

Quelle

2016-07-09 rawnly

Sie teilen Variablen t, tNoMs, hexTime. Und, das wichtigste, element und opt! Ich habe es in der newClock() Methode versteckt. So sollte das funktionieren:

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

Quelle

2016-07-09 19:29:46 spirit

Ihr sind Ihre Javascript-Variablen als global teilen, die einander überschreiben.

$.fn.newClock = function (options) { 

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

    var element = $(this);

Quelle

2016-07-09 19:15:52 Steve

Clock-Plugin jQuery

Antwort

Verwandte Themen