xxRelogio/clock009.html at master · dubway/xxRelogio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Glitch</title>

<script type="text/javascript">
function randomRange(minValue, maxValue){
	var vMin = minValue;
	var vMax = maxValue;

	return Math.floor((Math.random()*vMax)+vMin);
}

function showTime(){
	//Variables
	var dateNow = new Date();
	var h = dateNow.getHours();
	var m = dateNow.getMinutes();
	var s = dateNow.getSeconds();

	if (h <= 9){
		h = "0" + h;
	}
	if (m <= 9){
		m = "0" + m;
	}
	if (s <= 9){
		s = "0" + s;
	}


	//m = str.slice(1,1);
	var out = h + ":" + m + ":" + s;
	var hou1 = h.toString().substr(0,1);
	var hou2 = h.toString().substr(1,1);
	var min1 = m.toString().substr(0,1);
	var min2 = m.toString().substr(1,1);
	var seg1 = s.toString().substr(0,1);
	var seg2 = s.toString().substr(1,1);
	document.getElementById("clock").innerHTML = out;

	//------------------------------------------------

	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	context.canvas.width  = window.innerWidth;
	context.canvas.height = window.innerHeight;

	var images = ["hou1", "hou2", "min1", "min2", "seg1", "seg2"];

	context.clearRect(0, 0, canvas.width, canvas.height);

	for(i=0; i<=5; i++){
		var img = new Image();
		img.src = "images/" + eval(images[i]) + ".jpg";
		var kern = -25;
		var cX = (img.width + kern)*i;
		var cY = 0;
		var cW = (img.width)*(canvas.width/(img.width*6));
		var cH = (img.height*cW)/img.width;
		context.drawImage(img, cX, cY, cW, cH);
	}

	//-------------------------------------------------

	//get image data
	var  imgData = context.getImageData(0, 0, canvas.width, canvas.height);

	//get pixel data
	var pixelData = imgData.data;
	var length = pixelData.length;
	var cols = imgData.width;
    var rows = imgData.height;

	function slash(line, stroke, offset){

		var start = canvas.width*line
		var range = canvas.width*stroke;
		var myArray = new Array();

		for (var j=0; j<range; j+=4){
			myArray[j] = pixelData[j+start];
			myArray[j+1] = pixelData[j+start+1];
			myArray[j+2] = pixelData[j+start+2];
			myArray[j+3] = pixelData[j+start+3];
		}

		for(var n=0; n<range; n++){
			pixelData[n+start+offset] = myArray[n];
		}

		//put image data back
		context.putImageData(imgData, 0, 0);
	}

	//slash(600,60,-192);

	//slash(800,20,-192);

	//slash(500,60,+192);


	//-------------------------------------------------


	//refresh (1s)
	setInterval(showTime, 1000);
	//setTimeout(showTime, 5000);
}


//window.onload = showTime;

console.log(window.innerWidth);


</script>


<!-- <body onLoad="showTime()" bgcolor="silver"> -->
<body onLoad="showTime()" bgcolor="silver">

<p id="clock">yep:</p>

<canvas id="myCanvas"></canvas>

</body>
</html>