Display Today's Moon Phase On The Page - jQuery jsRapMoon

jsRapMoon is a super tiny jQuery plugin that allows you to create a graphic of the moon showing the current moon phase on the webpage.

How to use it:

1. Create an empty container in which to place the picture of the moon.

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

2. Load the jQuery jsRapMoon plugin's JavaScript and Stylesheet in the document. That's it.

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

3. Check out jsRapMoon.js to see how this plugin calculates and visualizes moon phases.

$(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);

---

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.