-
Star
(129)
You must be signed in to star a gist -
Fork
(98)
You must be signed in to fork a gist
-
-
Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
| <!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> |
Hey is it just me or does this not work anymore? I can't style it at all.
EDIT: I see the clock in this format - 2021-10-04T22:24:30-04:00 EDIT2: Use the one linked by SJP176.
thanks for asking this question & then posting your answer, @JonJaded -- and thanks for the fix, @SJP176 (um, 20 months ago... :))
Rawgit is shutting down soon. Here is an alternative link: https://gistcdn.githack.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html
Working perfectly. Much thanks!
I ended up pasting the URL from SJP176 plut the old text formatting. Otherwise I get the YY-MM-DDTHH:MM:SS-04:00 format.
https://gistcdn.githack.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html?style=font: bold 30px monospace; color: blue; display: inline-block; border-radius: 5px; padding: 2px 5px;&format=YYYY-MM-DD HH:mm:ss
Working pretty well now. Thanks.
THANK YOU. AWESOME
Lol, before noticing these comments, I found a partial workaround: using OBS "browser" plugin "custom CSS" field to set the font size and color (e.g. body { background-color: rgba(0, 0, 0, 0.5); margin: 0px 5px; overflow: hidden; font-size: 50px; color: lightgray }), although I was not able to change the time format that way (so it was still YYYY-MM-DD etc.).
Learning that just replacing "cdn.rawgit.com" with "gistcdn.githack.com" in the original URLs fixed them has been a relief! Thank you @SJP176 !
Wondering if something would be broken (as it looks like the URLs may refer to specific github commits?) in case @sam0737 updates the instruction page with the new URLs... [UPDATE: Probably not... the instructions are just in a comment. So, unless github prevents from editing older posts, he should be able to update the instructions without breaking anything at all!]
Rawgit URL is dead now, it's no longer accessible, so you have to use a different URL to get the clock.
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?
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.
The style is unavailable now?