The moon today in your web

See in another background color
Settings

Size (pixels)

Hue
Clarity

Options:

Use this option only to configure with CSS. See an example in Codepen

Caption

Text language

Code to paste on your website

Notes:
  1. If you want you can set the DIV container of the moon in your stylesheet.
    For example:
    #contain_moon{ background-color:gray; color:white; font-family:Arial; }
  2. Moon clicks the lunar calendar month. (Do not handle this link)
  3. This widget out of your site does not load scripts so it does not generate cookies.
  4. Languages available output widget: Català ; Deutsch ; English ; Español ; Française ; Italiano ; Polski ; Português ; русский ; 中国 ;
  5. See an example in Codepen
  6. This widget gives you more

    Create function 'moon_widget_loaded' for the Moon throughout the month.

    Example:

    See example

    <div id="ex_moon_1" style="text-align:center"><!-- row 1 --></div> <div id="ex_moon_2" style="text-align:center"><!-- row 2 --></div> <script> function moon_widget_loaded(moon){ /* row 1 */ var html='<div>'+moon.nameMonth[moon.month]+' '+moon.year+'</div>' for (i=1;i<=moon.daysMonth;i++){ if (moon.phase[i].isPhaseLimit){ html+='<div style="display:inline-block;border:1px solid #cccccc;text-align:center;margin:2px;padding:0px 5px;vertical-align:top">' html+= moon.nameDay[moon.phase[i].dayWeek] +" "+i html+='<div>'+moon.phase[i].svg+'</div>' html+="<div>"+moon.phase[i].phaseName + "</div>" html+="</div>" } } document.getElementById("ex_moon_1").innerHTML=html /* row 2 */ html=""; var days =[1,15,moon.daysMonth] for (day in days){ i=days[day] html+='<div style="display:inline-block;border:1px solid #cccccc;text-align:center;margin:2px;padding:0px 5px;vertical-align:top">' html+= moon.nameDay[moon.phase[i].dayWeek] +" "+i html+='<div>'+moon.phase[i].svg+'</div>' html+="<div>"+moon.phase[i].phaseName + "</div>" if (!moon.phase[i].isPhaseLimit)html+=Math.round(moon.phase[i].lighting)+"%" html+="</div>" } document.getElementById("ex_moon_2").innerHTML=html } </script>

     

    Object moon
    • moon.month : Number → 0 (January) - 11 (December)
    • moon.year : Number
    • moon.firstDayMonth : Number → 1 (Monday) - 7 (Sunday)
    • moon.daysMonth : Number → 28 - 31
    • moon.nameDay : Array → ['Monday', 'Tuesday' ...]
    • moon.nameMonth : Array → ['January', 'February' ...]
    • moon.phase [1 - moon.daysMonth ] : Object →
      • .phaseName : String
      • .isPhaseLimit : Boolean
      • .lighting : Number %
      • .timeEvent : String h:m:s
      • .dayWeek : Number → 0 (Monday) - 6 (Sunday)
      • .svg : String svg image