0

私はJqueryが初めてで、いくつかのチュートリアルに従っていますが、これで行き詰まりました。うまく機能する Jquery クロックを作成するためのチュートリアルを見つけましたが、それをプラグインに変換しようとしています。私が抱えている問題は、単一の div に基づいてプラグインを呼び出す方法を見てきましたが、これには困惑しています。コードを見て、プラグインを呼び出す方法を教えてください。ありがとう

HTML:

    <head>
    <script src="jquery.min.js"></script>
    <script src="clock.js"></script>
    <script>
        // Need to call

    </script>

    <style> 
            #clock {
              position: relative;
              width:280px;
              height: 285px;
              margin: 20px auto 0 auto;
              background: url(images/clockface.png);
              list-style: none;
            }

            #sec, #min, #hour {
              position: absolute;
              width: 7px;
              height: 70px;
              top: 125px;
              left: 140px;
            }

            #sec {
              background: url(images/second.png);
              z-index: 3;
            }


            #min {
              background: url(images/min.png);
              z-index: 2;
            }

            #hour {
              background: url(images/hour.png);
              z-index: 1;
            }
    </style>
</head>
<body>
    <ul id="clock"> 
      <li id="sec"></li>
      <li id="hour"></li>
      <li id="min"></li>
    </ul>
</body>

JS...

 (function($){
$.fn.mclock = function(){
    var defaults = {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var hdegree = hours * 30 + (mins / 2);
        },
        options = $.extend(defaults, args);
        console.log(options);

    this.each(function(){
      setInterval( function() {
  var seconds = new Date().getSeconds();
  var sdegree = seconds * 6;
  var srotate = "rotate(" + sdegree + "deg)";

  $("#sec").css({ "transform": srotate });

  }, 1000 );

  setInterval( function() {
  var hours = new Date().getHours();
  var mins = new Date().getMinutes();
  var hdegree = hours * 30 + (mins / 2);
  var hrotate = "rotate(" + hdegree + "deg)";

  $("#hour").css({ "transform": hrotate});

  }, 1000 );

  setInterval( function() {
  var mins = new Date().getMinutes();
  var mdegree = mins * 6;
  var mrotate = "rotate(" + mdegree + "deg)";

  $("#min").css({ "transform" : mrotate });

  }, 1000 );    })(jQuery);
4

1 に答える 1

0

更新: hello world に戻ると、ブレースの欠落が明らかになりました }

注: プラグインを壊す可能性のある this.each を返す (ing) ことはありません

スケルトンプラグイン

/*
 * PLUGIN-NAME
 * PLUGIN-DESCRIPTION
 *
 * Copyright 2011 YOUR-NAME YOUR-WEBSITE-URL
 * Released under the MIT License
 */

(function($){

$.fn.PLUGIN_NAME = function(options) {

    var opts = $.extend({}, $.fn.PLUGIN_NAME.defaults, options);

    return this.each(function() {

    });

};

$.fn.PLUGIN_NAME.defaults = {
};

})(jQuery);
于 2013-01-01T13:21:51.730 に答える