User:Manetta/rgb-clock: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
[http://test.manettaberends.nl/rgb-clock.html rgb-clock]
a link to the [http://test.manettaberends.nl/rgb-clock.html rgb-clock] *live*
 
here some screen's:<br>
 
[[File:Manetta-rgb-clock-1.png | 800px]]<br><br>
[[File:Manetta-rgb-clock-2.png | 800px]]<br><br>
[[File:Manetta-rgb-clock-3.png | 800px]]<br><br>
<br><br>
 
 
<source lang="html4strict">
 
 
<script>
 
function GetClock(){
    d = new Date();
    nhour  = d.getHours();
    nmin  = d.getMinutes();
    nsec  = d.getSeconds();
        if(nhour ==  0) {ap = " AM";nhour = 12;}
    else if(nhour <= 11) {ap = " AM";}
    else if(nhour == 12) {ap = " PM";}
    else if(nhour >= 13) {ap = " PM";nhour -= 0;}
    if(nhour <= 9) {nhour = "0" +nhour;}
    if(nmin <= 9) {nmin = "0" +nmin;}
    if(nsec <= 9) {nsec = "0" +nsec;}
      document.getElementById('clockbox').innerHTML=""+nhour+" "+nmin+" "+nsec+"";
      setTimeout("GetClock()", 1000);
 
    var values = [nhour, nmin, nsec];
console.log(values);
 
function fill() {
var a = Math.floor(10.625*nhour);
var b = Math.floor(4.25*nmin);
var c = Math.floor(4.25*nsec);
var d = "1";
var fillcolor = "rgba("+a+","+b+","+c+","+d+")";
return fillcolor;
}
function stroke() {
var a = Math.floor(4.25*nmin);
var b = Math.floor(4.25*nsec);
var c = Math.floor(10.625*nhour);
var d = "1";
var strokecolor = "rgba("+a+","+b+","+c+","+d+")";
return strokecolor;
}
function background() {
var a = Math.floor(4.25*nsec);
var b = Math.floor(10.625*nhour);
var c = Math.floor(4.25*nmin);
var d = "1";
var color = "rgba("+a+","+b+","+c+","+d+")";
return color;
}
function strokewidth() {
var a = Math.floor(2*nsec);
var width = a+"px";
return width;
}
 
console.log("stroke color: (red = sec, green = hour, blue = min) * 4.25 = "+stroke());
console.log("fill color: (red = hour, green = min, blue = sec) * 4.25 = "+fill());
console.log("stroke color: (red = min, green = sec, blue = hour) * 0.167 = "+stroke());
// this is the place
 
function radius(){
var a = Math.floor(10*nsec);
var size = a+"px";
return size;
}
 
$("#seconds").css("background", background());
 
$("#one").css("background", fill());
$("#one").css({
"border-color": stroke(),
        "border-width": strokewidth(),
        "border-style":"solid",
  "border-radius": radius(),
        });
 
}
 
window.onload=GetClock;
 
 
</script>
 
 
</source>

Latest revision as of 16:54, 7 October 2014

a link to the rgb-clock *live*

here some screen's:

Manetta-rgb-clock-1.png

Manetta-rgb-clock-2.png

Manetta-rgb-clock-3.png




	<script>

	function GetClock(){
	    d = new Date();
	    nhour  = d.getHours();
	    nmin   = d.getMinutes();
	    nsec   = d.getSeconds();
	         if(nhour ==  0) {ap = " AM";nhour = 12;} 
	    else if(nhour <= 11) {ap = " AM";} 
	    else if(nhour == 12) {ap = " PM";} 
	    else if(nhour >= 13) {ap = " PM";nhour -= 0;}
	    if(nhour <= 9) {nhour = "0" +nhour;}
	    if(nmin <= 9) {nmin = "0" +nmin;}
	    if(nsec <= 9) {nsec = "0" +nsec;}
	      document.getElementById('clockbox').innerHTML=""+nhour+" "+nmin+" "+nsec+"";
	      setTimeout("GetClock()", 1000);

	    var values = [nhour, nmin, nsec];
		console.log(values);

		function fill() {
			var a = Math.floor(10.625*nhour);
			var b = Math.floor(4.25*nmin);
			var c = Math.floor(4.25*nsec);
			var d = "1";
			var fillcolor = "rgba("+a+","+b+","+c+","+d+")";
			return fillcolor;
		}
		function stroke() {
			var a = Math.floor(4.25*nmin);
			var b = Math.floor(4.25*nsec);
			var c = Math.floor(10.625*nhour);
			var d = "1";
			var strokecolor = "rgba("+a+","+b+","+c+","+d+")";
			return strokecolor;
		}
		function background() {
			var a = Math.floor(4.25*nsec);
			var b = Math.floor(10.625*nhour);
			var c = Math.floor(4.25*nmin);
			var d = "1";
			var color = "rgba("+a+","+b+","+c+","+d+")";
			return color;
		}
		function strokewidth() {
			var a = Math.floor(2*nsec);
			var width = a+"px";
			return width;
		}

			console.log("stroke color: (red = sec, green = hour, blue = min) * 4.25 = "+stroke());
			console.log("fill color: (red = hour, green = min, blue = sec) * 4.25 = "+fill());
			console.log("stroke color: (red = min, green = sec, blue = hour) * 0.167 = "+stroke());
			// this is the place 

		function radius(){
			var a = Math.floor(10*nsec);
			var size = a+"px";
			return size;
		}

		$("#seconds").css("background", background());

		$("#one").css("background", fill());
		$("#one").css({
			"border-color": stroke(), 
         	"border-width": strokewidth(), 
         	"border-style":"solid",
  			"border-radius": radius(),
        });

	}

window.onload=GetClock;


	</script>