Potser t'interessi el widget (giny) la lluna d'avui a la teva web

Fases de la lluna API (amb imatges svg)

API

Copia i enganxa el codi següent i el dels exemples que vulguis. Després personalitza el text en vermell.


<div id="ex1"></div>
<div id="ex2"></div>
<div id="ex3"></div>


<script type="text/javascript">		
	
function load_moon_phases(obj){
	var gets=[]
	for (var i in obj){
		gets.push(i+"="+encodeURIComponent(obj[i]))
	}	
	var xmlhttp = new XMLHttpRequest()
	var url = "http://www.icalendar37.net/lunar/api/?"+gets.join("&")
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var moon  = JSON.parse(xmlhttp.responseText)
			example_1(moon)
			example_2(moon)
			example_3(moon)	
		}
	}
	xmlhttp.open("GET", url, true)
	xmlhttp.send()
}
document.addEventListener("DOMContentLoaded", function() { 
	var configMoon = {
		lang  		:'en', // 'ca' 'de' 'en' 'es' 'fr' 'it' 'pl' 'pt' 'ru' 'zh' (*)
		month 		:new Date().getMonth() + 1, // 1  - 12
		year  		:new Date().getFullYear(),
		size		:50, //pixels
		lightColor	:"#FFFF88", //CSS color
		shadeColor	:"#111111", //CSS color
		sizeQuarter	:20, //pixels
		texturize	:false //true - false
	}
	configMoon.LDZ=new Date(configMoon.year,configMoon.month-1,1)/1000
	load_moon_phases(configMoon)
})

</script>

(*) Idiomes de sortida disponibles de l'API: ca Català ; de Deutsch ; en English ; es Español ; fr Française ; it Italiano ; pl Polski ; pt Português ; ru русский ; zh 中国 ;

Exemple 1

<script type="text/javascript">
function example_1(moon){
	var day = new Date().getDate()
	var dayWeek=moon.phase[day].dayWeek
	var html="<div class='moon'>"
	html+="<div>"+moon.nameDay[dayWeek]+"</div>"
	html+="<div>"+ day + " " + moon.monthName + " "+moon.year+"</div>"
	html+=moon.phase[day].svg
	html+="<div>"+moon.phase[day].phaseName + " "+ Math.round(moon.phase[day].lighting)+"%</div>"
	html+="</div>"
	document.getElementById("ex1").innerHTML=html
} </script>
Estils usats en aquest exemple
.moon{ background-color:#666666; display:inline-block; padding:10px 20px; color:#FFFFFF; margin:1px; }

Exemple 2

<script type="text/javascript">
function example_2(moon){
var html="<div class='moon'>"
html+="<div>"+ 1 +" "+moon ['monthName'] + " "+moon.year +"</div>"
html+=moon.phase[1].svg
html+="<div>"+moon.phase[1].phaseName + " "+ Math.round(moon.phase[1].lighting)+"%</div>"
html+="</div>"
html+="<div class='moon'>"
html+="<div>"+moon.daysMonth +" "+moon ['monthName'] + " "+moon.year +"</div>"
html+=moon.phase[moon.daysMonth].svg
html+="<div>"+moon.phase[moon.daysMonth].phaseName + " "+ Math.round(moon.phase[moon.daysMonth].lighting)+"%</div>"
html+="</div>"
for (i=1;i<=moon.daysMonth;i++){
if (moon.phase[i].isPhaseLimit){
html+="<div class='moon'>"
html+= "<div class='phaseLimit'>"+moon.phase[i].svgMini+" "+i+"</div><br clear=all>"
html+=moon.phase[i].svg
html+="<div>"+moon.phase[i].phaseName + " </div>"
html+="</div>"
}
}
document.getElementById("ex2").innerHTML=html } </script>
Estils usats en aquest exemple
.moon{ background-color:#666666; display:inline-block; padding:10px 20px; color:#FFFFFF; margin:1px; } .phaseLimit{ position:absolute; }

Exemple 3

<script type="text/javascript">
function example_3(moon){
var sunday
var day
var firstDayMonth = parseInt(moon.firstDayMonth)
var lastDayMonth = parseInt(moon.phase[moon.daysMonth].dayWeek)
var html="<table cellspacing=5 cellpadding=0 border=0> "
html+="<tr><th colspan=7>"+moon.nameMonth[moon.month-1]+" "+ moon.year+"</th><tr>"
html+="<tr>"
for (var i=0;i<7;i++){ html+="<th>"+moon.nameDay[i]+"</th>" }
html+="</tr><tr>"
html+= new Array(firstDayMonth).join( "<td class='void'></td>" );
for ( i=0;i < moon.daysMonth;i++){
day=i+1
sunday=(moon.phase[day].dayWeek==6)?"class='sunday'":""
html+="<td "+sunday+">"
indexFaseLimit = moon.phase[day].isPhaseLimit
if (indexFaseLimit){
html+= "<span title='index="+indexFaseLimit+ " - "+moon.phase[day].phaseName+"' >" + moon.phase[day].svgMini + "</span>"

}
html+=day+"</td>"
if ((i+firstDayMonth)%7==0) html+="</tr><tr>"
}
html+= new Array(7 - lastDayMonth).join( "<td class='void'></td>" );
html+="</tr></table>"
document.getElementById("ex3").innerHTML=html
} </script>
Estils usats en aquest exemple
td{ background-color:#CCCC99; width:80px; height:40px; text-align:right; vertical-align:top; } .void{ background-color:#FFFFFF; } .sunday{ background-color:#880000; color:#FFFFFF; }
Avís: Pots manipular el que vulguis excepte el link al calendari lunar del mes.

Object moon