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 发现缺少大括号}

注意：您不会返回（ing）this.each，这可能会破坏您的插件

骨架插件

/*
 * 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 回答