Skip to content

Instantly share code, notes, and snippets.

@kirinelf

kirinelf/clock.html

Forked from sam0737/clock.html
Last active September 9, 2025 12:37
Show Gist options
  • Save kirinelf/932d7704e623fd42970801597ddcccc4 to your computer and use it in GitHub Desktop.
Save kirinelf/932d7704e623fd42970801597ddcccc4 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"
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');
// output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
c();
</script>
</body>
</html>
@chessset5
Copy link

chessset5 commented Sep 2, 2025 •
edited
Loading

I made an adjustment to include the analog clock you can toggle based on this code. Am I allowed to post it online under certain condition? or should I just use it myself?

@bgh1234554, No one is stopping you, all anyone asks is that you format your comment correctly.

Use three ticks (`) (top left of a US layout keyboard) on top and bottom of your code to format the code.
One tick for one line code snippets.

|```html
| // code here and the (and the bars/pipes I used as an escape)
|```

`#one liner`

@lbthelwell
Copy link

How can I change the time zone of the clock? It works brilliantly to show the time of my current time zone, but I'd also like to show the time for e.g. India. (I'd use a separate file for the other time zone)

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