WIDGETS

Clock Widget

Preview

About

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

Version: 2.0, File Size: 4.07KB

How To Add?

By hotlinking:

Put this script on your HTML document.

<script src="https://404city.neocities.org/widget/clockV2.js" data-seconds="true" data-format="12-hour" data-date="DD MONTH_FULL YYYY DAY_FULL"></script>

By uploading on your site (Recommended):

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="12-hour" data-date="DD MONTH_FULL YYYY DAY_FULL"></script>

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

Script Attributes:

Here are the script attributes of the clock widget:

Attribute	Conditions
data-seconds	true => shows seconds. false => hides seconds.
data-format	12-hour => displays time in 12 hour format. 24-hour => displays time in 24 hour format.
data-date	The attribute where you can write your date displaying format using the placeholders. List of placholders with an example date => 01 February 2000 Friday: DAY_FULL => Friday DAY => Fri MONTH_FULL => February MONTH => Feb YYYY => 2000 DD => 01 D => 1 MM => 02 M => 2 For example, to write "February 01, 2000 - Fri" it should be: MONTH_FULL DD, YYYY - DAY Another example, to write "1/02/2000" it should be: D/MM/YYYY Note: Only use the listed placeholders and symbols such as "/", ".", "[SPACE]", "-" etc. Don't write any other text, letters, or numbers, otherwise it might break.

ID and Class Information:

Here are the ID and Class selectors of the 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	Flexbox which contains hours, minutes, seconds, AM/PM displays and colon symbols.
.clockDigit	div	General class for hours, minutes, seconds and AM/PM displays.
.clockColon	span	Colon symbols of clock display.
#clockHours	div	Displays current hours.
#clockMinutes	div	Displays current minutes.
#clockSeconds	div	Displays current seconds.
#clockAMPM	div	Displays AM/PM text.
#dateDisplay	div	Displays current date.

Bonus:
You can create a blink effect using this simple CSS code:

.clockColon {animation: clockBlink 1s steps(1) infinite;}
@keyframes clockBlink {50% {visibility: hidden;}}

Default CSS Rules

These are the default CSS properties that are automatically generated and applied by the script:

:where(#clock, #clockDisplay) {
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(#clock) {
    height: 100px;
    width: 300px;
    flex-direction: column;
    border: 1px solid black;
    user-select: none;
    font-family: Arial, Helvetica, sans-serif;
    *, & {box-sizing: border-box;}
}
:where(#clockDisplay) {font-size: 3rem;}
:where(#clockAMPM) {margin-left: 0.5rem}
:where(#clock:not([data-seconds="true"]) #clockSeconds,
#clock:not([data-seconds="true"]) .clockColon:last-of-type,
#clock:not([data-format="12-hour"]) #clockAMPM) {display: none !important;}

HTML Structure

The HTML code that is automatically generated by the script:

<div id="clock">
    <div id="clockDisplay">
        <div id="clockHours" class="clockDigit">##</div>
        <span class="clockColon">:</span>
        <div id="clockMinutes" class="clockDigit">##</div>
        <span class="clockColon">:</span>
        <div id="clockSeconds" class="clockDigit">##</div>
        <div id="clockAMPM" class="clockDigit">##</div>
    </div>
    <div id="dateDisplay">Loading...</div>
</div>

Update Log

[v2.0] - 22 July 2026, Wednesday

Added customizable and detailed time display elements and optimized the code.
Added "data-date" attribute to the widget.

[v1.0] - 13 November 2025, Thursday

Widget is ready to use!

Click To Go Back To The Widgets Page