Skip to content

Instantly share code, notes, and snippets.

@sam0737

sam0737/clock.html

Last active October 27, 2025 20:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
Download ZIP
OBS Studio: A HTML page for showing current date and time in the video
Raw
clock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A simple clock</title>
</head>
<body translate="no" >
<div id="output"></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"] || '');
}, 1000);
c();
</script>
</body>
</html>
@alkaris2
Copy link

alkaris2 commented Jan 21, 2022

Rawgit URL is dead now, it's no longer accessible, so you have to use a different URL to get the clock.

@LHY51
Copy link

LHY51 commented Oct 21, 2023

I want it to display fractional seconds, but, I can't get it to work. Is there any way to have an refresh rate or auto-update function?

@jmeile
Copy link

jmeile commented Sep 3, 2025 •
edited
Loading

You should use moment with locales instead:
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js'></script>

Then you can use your language on the timestamps:

moment.locale('de');
m = moment('2025-10-07 22:00:10');
output.innerText = m.format(urlParams["format"] || 'dd. DD MMM YYYY | HH:mm:ss');

It will print:
Di. 07. Okt. 2025 | 22:00:10

To use the locales with this code, just add:

moment.locale('de');
output.innerText = moment().format(urlParams["format"] || '... your_format ...');

For example:
output.innerText = moment().format(urlParams["format"] || 'dd. DD MMM YYYY | HH:mm:ss');

It is nice to always have international code, so, you can adapt it to your country.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment