404 City - Clock Widget

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 own 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

Here are the default CSS properties of elements that already defined in your widget file. (You don't have to define them in your own CSS file for second time.)

: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!