Moon Phases

Hello all, I’m trying to set up a lockscreen on my iPhone. For the most part it’s set up. I’m trying to get it so that it will show the phases of the moon during the night time. I have very little experience in coding at all so any help is greatly appreciated.

Anyway, i found a script for the phases of the moon (24fun.com) and have incorporated into the javascript file for the theme I am using. The whole file consists of an HTML file, a javascript file, a css file and several image files. I can get a blank square to show up where I want the moon images to be, which leads me to believe that I’ve set up the image location in the script wrong or something. I’m sure it’s something to do with linking the images, to the css file possibly.

This is the structure:

Main Folder:
->css/css file
->js/javascript file
->images
–>images/moonitems/moon images.png
–>images/klear/weather images.png

and a couple of other folders for iphone settings.

Can anyone take a look and tell me where I’m going wrong?

in the html file I have:

[CODE]<div id=”moonContainer”>
<img id=”moonIcon” src=””/>
</div>[/CODE]

In the css file I have:

[CODE]/*moon*/
#moonContainer{
float:left;
opacity: 1;
margin: 35px 0 0 31px;
background-color: INVISIBLE;
color: white;

}

#moonIcon{
position:absolute;
height: 96px;
width: 96px;
border: none;
top:20px;
left:0px;
opacity:0.5;
z-index:0;
-webkit-transform: rotate(-40deg);

}[/CODE]

and the javscript file I have:

[CODE]/**********************
Moon
***********************/

var pastdate
var pastyear=2002
var pastmonth=5
var pastday=11
var nowdate
var c
var pausenormal=50
var pausenowmoon=3000
var moonday
var i_mooncycle=1
var mooncycle=29.530589

var picture = new Array(“images/moonitems/n1.png”,”images/moonitems/n2.png”,”images/moonitems/n3.png”,”images/moonitems/n4.png”,”images/moonitems/n5.png”,”images/moonitems/n6.png”,”images/moonitems/n7.png”,”images/moonitems/n8.png”,”images/moonitems/n9.png”,”images/moonitems/n10.png”,”images/moonitems/n11.png”,”images/moonitems/n12.png”,”images/moonitems/n13.png”,”images/moonitems/n14.png”,”images/moonitems/n15.png”,”images/moonitems/n16.png”,”images/moonitems/n17.png”,”images/moonitems/n18.png”,”images/moonitems/n19.png”,”images/moonitems/n20.png”,”images/moonitems/n21.png”,”images/moonitems/n22.png”,”images/moonitems/n23.png”,”images/moonitems/n24.png”,”images/moonitems/n25.png”,”images/moonitems/n26.png”,”images/moonitems/n27.png”,”images/moonitems/n28.png”,”images/moonitems/n29.png”)

var imgpreload=new Array()
for (i=0;i<=picture.length;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=picture[i]
}

pastdate=new Date(pastyear,pastmonth,pastday,0,0,0)
nowdate=new Date()
resultdays=(Date.parse(nowdate)-Date.parse(pastdate))/1000/60/60/24
moonday=resultdays/mooncycle
moonday=(resultdays/mooncycle)-(Math.floor(resultdays/mooncycle))
moonday=Math.round(mooncycle*moonday)
c=”<img src=’images/moonitems/n”+moonday+”.png’ name=’moonimg’>”

window.onload=animatemoon

function animatemoon() {
if (i_mooncycle==moonday) {
var pause=pausenowmoon
}
else {
var pause=pausenormal
}
var mimg=”images/moonitems/n”+i_mooncycle+”.png”
document.moonimg.src=mimg
i_mooncycle++
if (i_mooncycle>29) {i_mooncycle=1}
var timer=setTimeout(“animatemoon()”,pause)
}
[/CODE]

I’ve only shown the moon stuff that I want to get working.

Thanks!

Also in #JavaScript _↴