jsRapMoon是一个非常小的jQuery插件，它可以让你在网页上创建一个显示当前月相的月亮图形。

如何使用它:

1.制作一个空容器，将月亮的照片放在里面。

<div id="moonPhase"></div>

2.在文档中加载jQuery jsRapMoon插件的JavaScript和样式表。就是这样。

<link rel="stylesheet" href="jsRapMoon.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jsRapMoon.js"></script>

3.退房jsRapMoon.js看看这个插件是如何计算和可视化月相的。

$(window).resize(function () {
  $('.rapMoon').each(function () {
    this.Render();
  });
});
(function ($) {
  $.fn.jsRapMoon = function (options) {
    return this.each(function () {
      this.Render = function () {
        var w = $(this).width();
        var dark = '#444';
        var synodicMonth = 29.530588853;
        var curDate = new Date();
        var orgDate = new Date(2012, 7, 31, 0, 0, 0, 0);
        var milSec = curDate.getTime() - orgDate.getTime();
        var daysElapsed = parseInt(milSec / 1000 / 60 / 60 / 24);
        var daysSinceLast = daysElapsed % synodicMonth;
        var phase = daysSinceLast / synodicMonth;
        $(this).height(w).addClass('rapMoon');
        $('<div>').addClass('light').appendTo(this);
        $('<div>').addClass('texture').appendTo(this);
        $('.light').css('filter', 'blur(' + (w / 24) + 'px)');
        if (phase < 0.25)
          $('.light').css({
            'border-right-width': (phase * 2 * w),
            'border-left-color': '#fff',
            'background-color': '#fff',
            'border-right-color': dark
          });
        else if (phase < 0.5)
          $('.light').css({
            'border-left-width': ((0.5 - phase) * 2 * w),
            'border-left-color': '#fff',
            'background-color': dark,
            'border-right-color': dark
          });
        else if (phase < 0.75)
          $('.light').css({
            'border-right-width': ((phase - 0.5) * 2 * w),
            'border-left-color': dark,
            'background-color': dark,
            'border-right-color': '#fff'
          });
        else
          $('.light').css({
            'border-left-width': ((1 - phase) * 2 * w),
            'border-left-color': dark,
            'background-color': '#fff',
            'border-right-color': '#fff'
          });
      }
      this.Render();
    })
  }
})(jQuery);

预览截图

在页面上显示今天 月相 jQuery jsRapMoon