-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclock.html
92 lines (80 loc) · 3.1 KB
/
clock.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
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
<!DOCTYPE html>
<!--
Simple html page that creates a clock for old phones with old browsers.
Save this file in a folder (eg. as clock.html) on your computer, then
start a web server in a terminal window from that folder.
A simple way to do this is open a terminal window and move to the folder
holding the script (don't type '$', that's your prompt):
$ cd path/to/folder
Now find the IP address <addr> of your computer:
$ ipconfig getifaddr en0
You should get an address such as "10.0.1.4". If not, try en1 instead of
en0. Next start up the web server. If you have Python installed, you can
try one of these commands:
$ python -m http.server 8080
or
$ python3 -m http.server 8080
or
$ python -m SimpleHTTPServer 8080
depending on whether you have Python 3 or Python 2 available.
Once running, go to the web browser on your phone and enter the link:
http://<addr>:8080/clock.html
where <addr> is the IP address found earlier, eg 10.0.1.4
You should see a black screen with large red numbers with the correct
time. Pinch to zoom in or out to have the numbers fill the screen, plug
in the phone to keep it charged, adjust the brightness, prop it up, and
you're all set. You'll get bigger numbers with the phone on its side.
You can now close that terminal window since your phone will keep the
page running internally. Make sure you set up your phone settings so
that it doesn't shut off when plugged in.
-->
<html>
<head>
<title>Clock</title>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = today.getDate();
var w = today.getDay();
var day = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
m = checkTime(m);
s = checkTime(s);
// Format for 12-hour clock instead of default 24-hour clock.
// Remove these two lines for 24-hour clock.
var sep = getSep(h); // use sep to indicate am/pm.
if (h > 12) {h -= 12}; // use 12-hour clock
if (h == 0) {h = 12};
var theTime = h + ":" + m + ":" + s
var theDate = day[w] + ' ' + d
var theHour = sep
document.getElementById('text').innerHTML = theTime;
document.getElementById('date').innerHTML = theDate;
document.getElementById('hour').innerHTML = theHour;
var t = setTimeout(startTime, 100); // smooth repeat
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function getSep(h) {
var sep = 'AM';
if (h >= 12) {sep = 'PM'}; // use ':' for pm values, '.' for am
return sep;
}
</script>
</head>
<body onload="startTime()" style="background-color:black;">
<div id="date" style="color:#ffffff; font-family:sans-serif;
font-size:100px; text-align:right;
padding-top:120px; padding-right:120px;"></div>
<div id="text" style="color:#ffffff; font-family:monospace;
font-size:256px; text-align:right;
line-height:0.8; padding-right:120px;"></div>
<div id="hour" style="color:#aaaaaa; font-family:sans-serif;
font-size:100px; text-align:right;
line-height:0.8; padding-right:120px;"></div>
</body>
</html>