Scribd
Upload
26 views2 pages

Relojfull1 HTML

This document is an HTML code for a digital clock that displays the current time and date in fullscreen mode. It features a styled clock container with animations for the colons in the time display. The clock updates every second and is set to the 'America/Los_Angeles' time zone.

Uploaded by

vick.mtz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views2 pages

Relojfull1 HTML

This document is an HTML code for a digital clock that displays the current time and date in fullscreen mode. It features a styled clock container with animations for the colons in the time display. The clock updates every second and is set to the 'America/Los_Angeles' time zone.

Uploaded by

vick.mtz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Clock Fullscreen</title>
<style>
body {
background: black;
color: #87CEEB;
font-family: 'Courier New', monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
cursor: none;
}
.clock-container {
border: 5px solid #87CEEB;
box-shadow: 0 0 30px #87CEEB, 0 0 60px #87CEEB;
padding: 40px;
text-align: center;
border-radius: 20px;
}
.title {
font-size: 48px;
margin-bottom: 15px;
}
.date {
font-size: 30px;
margin-bottom: 20px;
}
.time {
font-size: 100px;
letter-spacing: 10px;
}
.colon {
animation: blink 4s infinite;
}
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
</style>
</head>
<body>
<div class="clock-container">
<div class="title">Time</div>
<div class="date" id="date">Loading...</div>
<div class="time" id="time">--:--:--</div>
</div>
<script>
function updateClock() {
const now = new Date();
const optionsTime = {
timeZone: 'America/Los_Angeles',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
};
const timeParts = new [Link]('en-US', optionsTime)
.formatToParts(now)
.reduce((obj, part) => {
if ([Link] !== 'literal') obj[[Link]] = [Link];
return obj;
}, {});
const hours = [Link];
const minutes = [Link];
const seconds = [Link];
[Link]('time').innerHTML =
`${hours}<span class="colon">:</span>${minutes}<span
class="colon">:</span>${seconds}`;
const optionsDate = {
timeZone: 'America/Los_Angeles',
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
const formattedDate = new [Link]('en-US',
optionsDate).format(now);
[Link]('date').textContent = formattedDate;
}
function goFullscreen() {
const el = [Link];
if ([Link]) [Link]();
else if ([Link]) [Link]();
else if ([Link]) [Link]();
}
// Launch fullscreen mode after page load
[Link] = () => {
updateClock();
setInterval(updateClock, 1000);
setTimeout(goFullscreen, 500);
};
</script>
</body>
</html>

You might also like