Sky Simulation

Depending on the time of day you access this page the background colour
and the image will change.

Use this code as the basis for your document:

<html>
<script>
<!--
var now = new Date();
var hours = now.getHours();

//insert the names of your images in each case.

//night (2-4)
        if (hours > 1 && hours < 4){
		document.write('<body bgcolor="black" text="#ffffff" vlink="#ffffff" link="#ffffff">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz11.gif"></center>')
	}

//night (12-2)
        if (hours > 23 || hours < 2){
		document.write('<body bgcolor="black" text="#ffffff" vlink="#ffffff" link="#ffffff">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz10.gif"></center>')
	}

//sunset (10-12)
        if (hours > 21 && hours < 24){
		document.write('<body bgcolor="black" text="#ffffff" vlink="#ffffff" link="#ffffff">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz9.gif"></center>')
	}

//evening (8-10)
        if (hours > 19 && hours < 22){
		document.write('<body bgcolor="black" text="#ffffff" vlink="#ffffff" link="#ffffff">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz8.gif"></center>')
	}

//evening (6-8)
        if (hours > 17 && hours < 20){
		document.write('<body bgcolor="steelblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz7.gif"></center>')
	}

//afternoon (4-6)
        if (hours > 15 && hours < 18){
		document.write('<body bgcolor="royalblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz6.gif"></center>')
	}

//early afternoon (2-4)
        if (hours > 13 && hours < 16){
		document.write('<body bgcolor="dodgerblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz5.gif"></center>')
	}

//mid-day (12-2)
        if (hours > 11 && hours < 14){
		document.write('<body bgcolor="deepskyblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz4.gif"></center>')
	}

//early morning (10-12)
        if (hours > 9 && hours < 12){
		document.write('<body bgcolor="skyblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz3.gif"></center>')
	}

//v-early morning (8-10)
        if (hours > 7 && hours < 10){
		document.write('<body bgcolor="lightsteelblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz2.gif"></center>')
	}

//dawn (6-8)
        if (hours > 5 && hours < 8){
		document.write('<body bgcolor="steelblue" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz1.gif"></center>')
	}

//pre-dawn (4-6)
        if (hours > 3 && hours < 6){
		document.write('<body bgcolor="slategray" text="#000000" vlink="#000000" link="#000000">')
		document.write('<center><h1>Sky Simulation</h1><br>')
		document.write('<img src="gz12.gif"></center>')
	}

//-->
</script>

//put the body of your page here.

</body>
</HTML>

Back