Preview

About

This is a simple clock, which displays your system time and also date.

How to add?

By hotlinking:

Put this script on your HTML document.

<script src="https://404city.neocities.org/widget/clock.js" data-seconds="true" data-format="12h"></script>

By uploading on your site:

Click here to download script! Then, upload it on your site and put this line on your HTML document.

<script src="YOUR_SCRIPT_PATH_HERE" data-seconds="true" data-format="12h"></script>

Make sure the script is located after <body> but before </body>:
The clock will instantly pop-up where you put the script!

ID and Class Informations:

Here are the ID and Class definitions of clock's elements. You can use them on your CSS file to customize your clock!

ID/Class	Element Type	Description
#clock	div	Main body of the clock.
#clockDisplay	div	Displays time.
#clockDisplay::after	pseudo-class	Contains seconds and AM/PM.
#dateDisplay	div	Displays date.

Script Attributes:

Here are the script attributes of clock widget.

Attribute	Conditions
data-seconds	true => shows seconds. false => hides seconds.
data-format	12h => displays time in 12 hour format. 24h => displays time in 24 hour format.

Default CSS Definements

:where(#clock) {
    height: 100px;
    width: 300px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid black;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none
}
:where(#clockDisplay) {
    box-sizing: border-box;
    font-size: 3em;
}
:where(#clockDisplay)::after {
    content: attr(data-seconds) attr(data-ampm);
}
:where(#dateDisplay) {
    box-sizing: border-box;
}

Update Log

13 November 2025, Thursday

Widget is ready to use!

Clock Widget