-
Notifications
You must be signed in to change notification settings - Fork 0
/
Clock2.htm
94 lines (89 loc) · 3.36 KB
/
Clock2.htm
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
<!DOCTYPE html>
<html>
<head>
<title>Clock Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Lexend', sans-serif;
background-color: #000000;
}
body {
position: relative;
}
#clock, #date, #month {
position: relative;
z-index: 1;
color: #ffffff; /* Black text */
text-align: center;
word-wrap: break-word; /* Ensure text wraps properly */
text-shadow: 0 0 10px #fff;
}
#clock {
font-size: 16vw; /* Adjust font size to 16% of viewport width */
max-width: 139vw; /* Limit text width to 139% of viewport width */
}
#date {
font-size: 8vw; /* Adjust date font size */
margin-bottom: -2vw; /* Adjust margin to position date above time */
}
#month {
font-size: 8vw; /* Adjust month font size */
}
#img1{
position: absolute;
bottom: 0;
z-index: 0;
background: url('\img1.png') no-repeat center center;
}
</style>
</head>
<body>
<div id="date"></div>
<div id="month"></div>
<div id="clock"></div>
<!-- <img src="https://i.pinimg.com/originals/40/78/39/407839a425fa1134b594ea1a06fdc641.gif" id="img1" height="900px
"/> -->
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
document.getElementById('clock').innerText = timeString;
// Update date
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
var day = days[now.getDay()];
var month = months[now.getMonth()];
var date = day + ', ' + now.getDate();
document.getElementById('date').innerText = date;
document.getElementById('month').innerText = month;
}
// Update the clock, date, and month every second
setInterval(updateClock, 1000);
// Initialize clock, date, and month at page load
updateClock();
</script>
</body>
</html>