-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
52 lines (47 loc) · 1.98 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><a-counter></title>
<!-- Importing Web Component's Polyfill -->
<script src="bower_components/platform/platform.js"></script>
<!-- Importing Custom Elements -->
<link rel="import" href="src/a-counter.html">
<link rel="import" href="src/a-clock.html">
</head>
<body>
<!-- Using Custom Elements -->
<h3>Counter</h3>
<a href="javascript:rand('counter')">Rand</a>
<a-counter id="counter" value="5555555555" pattern="[0-9]{10}" style="font-size:64px;width:640px;"></a-counter>
<h3>Counter (animation=fast)</h3>
<a href="javascript:rand('fast')">Rand</a>
<a-counter id="fast" value="1234567890" pattern="[0-9]{10}" animation="fast" style="font-size:64px;width:640px;"></a-counter>
<h3>Counter (pattern=€[0-9]{9})</h3>
<a href="javascript:rand('pre')">Rand</a>
<a-counter id="pre" value="€123456789" pattern="€[0-9]{9}" style="font-size:64px;width:640px;"></a-counter>
<h3>Counter (pattern=[0-9]{5}$/lbs)</h3>
<a href="javascript:rand('post')">Rand</a>
<a-counter id="post" value="12345$/lbs" pattern="[0-9]{5}\$\/lbs" style="font-size:64px;width:640px;"></a-counter>
<h3>Counter (font-size=24px, font-family=sans-serif)</h3>
<a href="javascript:rand('font')">Rand</a>
<a-counter id="font" value="13579" pattern="[0-9]{5}" style="font-size:24px;font-family:sans-serif;width:120px;"></a-counter>
<h3>Counter (hold)</h3>
<a href="javascript:unhold('hold')">Unhold</a>
<a href="javascript:rand('hold')">Rand</a>
<a-counter id="hold" value="1234567890" pattern="[0-9]{10}" hold style="font-size:64px;width:640px;"></a-counter>
<h3>Clock (12hours)</h3>
<a-clock 12hours style="font-size:64px;width:640px;"></a-clock>
<h3>Clock (24hours)</h3>
<a-clock style="font-size:64px;width:512px;"></a-clock>
<script>
function rand(id) {
document.getElementById(id).rand();
}
function unhold(id) {
document.getElementById(id).hold=false;
}
</script>
</body>
</html>