-
-
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> |
You probably won't need it, but I forked it to change the time to UTC because I have the need for it. All credit goes to sam0737, thank you for providing this.
I've also forked this to display EST time. All credit to sam0737
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?
Usage
A script for OBS Studio (https://obsproject.com/) to embed a current date and timestamp. No other softwares and plugins are needed. Just OBS Studio and the built-in Browser Source input.
這代碼是為了在OBS Studio中嵌入現在的日期和時間而寫的。而且不需要安裝其他軟件或插件即可使用,只需要OBS Studio和原生的Browser Source輸入。
For usage, please see this video:
具體用法請參看這短片:
https://youtu.be/wVbP8GQTLG8
Examples
Vanilla
https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html
White text
https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: white;
Rounded rectangle
https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: lightgray; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5);
With US date formatting
https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: lightgray; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5)&format=MMM DD YYYY HH:mm:ss;
Parameters
Use
style
to add more style to the output elementWhile
bodyStyle
for the style to the body elementUse
format
to control the date format. For the syntax, see https://momentjs.com/docs/#/displaying/format/License
This software is licensed under the MIT License.