-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
56 lines (46 loc) · 1.81 KB
/
index.html
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SegmentDisplay</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="segment-display.js"></script>
<script type="text/javascript">
var display = new SegmentDisplay("display");
display.pattern = "##:##:##";
display.cornerType = 2;
display.displayType = 7;
display.displayAngle = 9;
display.digitHeight = 20;
display.digitWidth = 12;
display.digitDistance = 2;
display.segmentWidth = 3;
display.segmentDistance = 0.5;
display.colorOn = "rgba(0, 0, 0, 0.9)";
display.colorOff = "rgba(0, 0, 0, 0.1)";
animate();
function animate() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var value = ((hours < 10) ? ' ' : '') + hours
+ ':' + ((minutes < 10) ? '0' : '') + minutes
+ ':' + ((seconds < 10) ? '0' : '') + seconds;
display.setValue(value);
window.setTimeout('animate()', 100);
}
</script>
</head>
<body>
<div style="padding: 50px 100px">
<div style="width: 216px; height: 126px; position: relative; background: transparent url(plexiglas.png) no-repeat top left">
<div style="position: absolute; left: 38px; top: 33px; width: 120px; height: 34px">
<canvas id="display" width="120" height="34"></canvas>
</div>
</div>
<p>Dokumentation: <a href="http://www.3quarks.com/de/Segmentanzeige">http://www.3quarks.com/de/Segmentanzeige</a></p>
</div>
</body>
</html>