Skip to content

Instantly share code, notes, and snippets.

@jakchagu

jakchagu/clock.html

Forked from sam0737/clock.html
Last active December 1, 2021 19:18
Show Gist options
  • Save jakchagu/a36acca6be8550ac3b72661c87f08d80 to your computer and use it in GitHub Desktop.
Save jakchagu/a36acca6be8550ac3b72661c87f08d80 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 + Time Zones
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.24.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.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() {
if (urlParams["tz"]) output.innerText = moment().tz(urlParams["tz"]).format(urlParams["format"] || '');
else output.innerText = output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
c();
</script>
</body>
</html>
@jakchagu
Copy link
Author

jakchagu commented Mar 19, 2020 •
edited
Loading

Building off of sam0703. Just updated the libraries being used to add time zone functionality.
Same usage as sam0703's original, just add a URL parameter based on the moment timezone libraries to set the TZ.

EXAMPLES
Eastern Time
https://gistcdn.githack.com/jakchagu/a36acca6be8550ac3b72661c87f08d80/raw/34e6c4c7674a7ecff8e6cf91c0301c3611cd85c7/clock.html?tz=America/New_York

Pacific Time
https://gistcdn.githack.com/jakchagu/a36acca6be8550ac3b72661c87f08d80/raw/34e6c4c7674a7ecff8e6cf91c0301c3611cd85c7/clock.html?tz=America/Los_Angeles

@aerodavo
Copy link

Is there an easy way to run this as a local file? I often use OBS just for recording, and sometimes am without an internet connection, so I'm worried the timestamp won't work in that case...

Thanks in advance!

@SealOfTime
Copy link

Forked with ability to change language

@wradevelop
Copy link

wradevelop commented Dec 1, 2021 •
edited
Loading

This might be dumb but I can't edit the display output on your fork like I can on the original. I need the tz output as I don't want to use my local time but I can't seem to get the following to work. bold 80px impact; color: white; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5)&format=DD MMM YYYY HH:mm:ss;

Essentially I can change either the tz or the display but not both. This is likely a syntax issue but IDK what I am doing wrong.

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