-
-
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> |
FYI, When I used this I had to disable Browser Source Hardware Acceleration in OBS Studio v22.0.2 64bit - Settings/Advanced/Sources, otherwise it didn't appear on screen. Thanks for this wonderful and easy solution!
非常感谢it9
完美啊,但在大陆使用被墙了得vpn才能上rawgit,我复制了一份。
http://roceys.cn/clock?style=font: bold 30px monospace; color: red; display: inline-block; border-radius: 5px; padding: 2px 5px;&format=YYYY-MM-DD HH:mm:ss
2019年1月23日 03:38:10
Rawgit is shutting down soon. Here is an alternative link:
https://gistcdn.githack.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html
Added time zone selection functionality in my fork. Thanks to sam0703 for the initial project!
Does this still work?
Does this still work?
Yes. The code does. Rawgit may not be useable. See @SJP176's comment above.
this how can change the font?
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.
The style is unavailable now?
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.
Here is a working clock:
https://bl.ocks.org/nidefawl/raw/45ce917404c58f913ae9563c126b53cc/?raw=true
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?
I've also forked this to display EST time. All credit to sam0737