clock/clock.html at main · boss477/clock · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 150px;
            background-image: url('bgwalll.jpg'); /* Image as background */
            background-size: cover; /* Ensures the image covers the entire screen */
            background-repeat: no-repeat; /* Prevents the image from repeating */
            color: white; /* Text color */
        }

        #clock {
            font-size: 50px;
            color: rgb(255, 255, 255); /* Clock color */
        }

        #date {
            font-size: 25px;
            color: rgb(255, 255, 255); /* Date color */
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1 style="color: rgb(255, 255, 255);">Digital Clock</h1>
    <div id="clock">00:00:00</div>
    <div id="date">Monday, 01 January</div>

    <script>
        function updateClock() {
            const now = new Date();

            // Time section (12-hour format)
            let hours = now.getHours();
            let minutes = now.getMinutes();
            let seconds = now.getSeconds();

            // Determine AM/PM
            let ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12; // Convert to 12-hour format
            hours = hours ? hours : 12; // Handle 0 as 12
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            document.getElementById("clock").innerText = hours + ":" + minutes + ":" + seconds + " " + ampm;

            // Date section
            const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            const monthsOfYear = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            const dayOfWeek = daysOfWeek[now.getDay()];
            const dayOfMonth = now.getDate();
            const month = monthsOfYear[now.getMonth()];
            document.getElementById("date").innerText = dayOfWeek + ", " + dayOfMonth + " " + month;
        }

        setInterval(updateClock, 1000);
        updateClock();
    </script>

</body>
</html>