How to use local clock_OBSFORUMS.jpg


Clock.html GitHub File
  1. Download the HTML File
  2. In OBS add a Browser Source
  3. Select local file
  4. Browse to the clock.html file
  5. adjust the height and width accordingly
You can edit the clock.html in the notepad app on windows, any other text editor on any other OS.

Lines 13 through 20 is where you can change the visual options like font type and color.
The lines look like this and make sure to put your settings between the : and the ;
Code:
    font-family: monospace;

    font-size: 30px;

    text-align: right;

    color: lightgray;

    border-radius: 10px;

    padding: 10px;

    background-color: rgba(0, 0, 0, 0.75);

Line 43 is where you can customize the text, by default it will be
Day/Month/Year 24:mm:ss

By default line 43 will look like this:
Code:
    output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss '
Screenshot 2022-01-24 174001.jpg


This is what I use for line 43:
Code:
    output.innerText = moment().format(urlParams["format"] || 'MMM DD, YYYY | hh:mm:ssa'
Screenshot 2022-01-24 173139.jpg


Make sure that your format text stays in-between the ' ' at the end of the line.

Here is a list of all the format options for the date and time line.
link to update format options

Description
Token​
Output
MonthM1 2 ... 11 12
Mo1st 2nd ... 11th 12th
MM01 02 ... 11 12
MMMJan Feb ... Nov Dec
MMMMJanuary February ... November December
QuarterQ1 2 3 4
Qo1st 2nd 3rd 4th
Day of MonthD1 2 ... 30 31
Do1st 2nd ... 30th 31st
DD01 02 ... 30 31
Day of YearDDD1 2 ... 364 365
DDDo1st 2nd ... 364th 365th
DDDD001 002 ... 364 365
Day of Weekd0 1 ... 5 6
do0th 1st ... 5th 6th
ddSu Mo ... Fr Sa
dddSun Mon ... Fri Sat
ddddSunday Monday ... Friday Saturday
Day of Week (Locale)e0 1 ... 5 6
Day of Week (ISO)E1 2 ... 6 7
Week of Yearw1 2 ... 52 53
wo1st 2nd ... 52nd 53rd
ww01 02 ... 52 53
Week of Year (ISO)W1 2 ... 52 53
Wo1st 2nd ... 52nd 53rd
WW01 02 ... 52 53
YearYY70 71 ... 29 30
YYYY1970 1971 ... 2029 2030
YYYYYY-001970 -001971 ... +001907 +001971
Note:Expanded Years (Covering the full time value range of approximately 273,790 years forward or backward from 01 January, 1970)
Y1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Yeary1 2 ... 2020 ...
EraN, NN, NNNBC AD
Note: Abbr era name
NNNNBefore Christ, Anno Domini
Note: Full era name
NNNNNBC AD
Note: Narrow era name
Week Yeargg70 71 ... 29 30
gggg1970 1971 ... 2029 2030
Week Year (ISO)GG70 71 ... 29 30
GGGG1970 1971 ... 2029 2030
AM/PMAAM PM
aam pm
HourH0 1 ... 22 23
HH00 01 ... 22 23
h1 2 ... 11 12
hh01 02 ... 11 12
k1 2 ... 23 24
kk01 02 ... 23 24
Minutem0 1 ... 58 59
mm00 01 ... 58 59
Seconds0 1 ... 58 59
ss00 01 ... 58 59
Fractional SecondS0 1 ... 8 9
SS00 01 ... 98 99
SSS000 001 ... 998 999
SSSS ... SSSSSSSSS000[0..] 001[0..] ... 998[0..] 999[0..]
Time Zonez or zzEST CST ... MST PST
Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they *do* work if you are using a specific time zone with the moment-timezone addon.
Z-07:00 -06:00 ... +06:00 +07:00
ZZ-0700 -0600 ... +0600 +0700
Unix TimestampX1360013296
Unix Millisecond Timestampx1360013296123

Clock.html code as of Jan 24, 2022
Updated code as of Oct 6, 2022
Code:
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>A simple clock</title>

</head>

<body translate="no" >
  <div id="output"
       style=    "display: inline-block;
        font-family: monospace;
        font-size: 30px;
        text-align: right;
        color: lightgray;
        border-radius: 10px;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.75);">
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
  <script>
// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
var urlParams;
(function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();
var output = document.getElementById("output");
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
var c;
setInterval(
c = function() {
    //output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss');
    // ^ old string, above, new preferred below:
    output.innerText = moment().format('LL LTS [GMT]ZZ');
}, 1000);
c();
  </script>
</body>
</html>
Author
Chessset5
Views
137,964
First release
Last update
Rating
5.00 star(s) 8 ratings

Latest reviews

Works perfectly & very flexible (timestamp format)
This is very nice! I was fumbling with capturing a clock website and cropping away the ads and everything, but then I needed to crop, and every reboot I needed to reload the clock site, and then I couldn't change the font and the display, and I messed around with a Chromakey filter to make it transparent... It was a whole mess.

Luckily I found this! Simple but very, very effective.

Now, I have little experience with HTML and CSS, but in case it helps anyone else: with the help of ChatGPT, I changed it to point to a local font file (I have a retro C64 style scene going on). Just put the referred font file in the same dir as the html.

<style>
@font-face {
font-family: myFont;
src: url('C64_Pro_Mono-STYLE.ttf');
}

#output {
display: inline-block;
font-family: myFont;
font-size: 50px;
text-align: right;
color: lightgray;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body translate="no" >
<div id="output"></div>

(...)
C
Chessset5
You can also embed the css right into the html if you so choose, I just made this to make a timer appear, perhaps in the future I will revise this to make it simpler to use in terms of customization.
You rock, thank you for this. I am a total html noob but was able to re-design the clock with no problem. Good work.
A must tool for every OBS user, I approved.
Very nice!! Thank you for sharing.
Tôi đang tìm kiếm nó với ý tưởng tuyệt vời
Nice, thank you.
Top