-
-
Save kirinelf/932d7704e623fd42970801597ddcccc4 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" | |
| 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> |
btw if you wanted too add this comment under line 43 for people to know what the format options are
Here are the entire format options for moment.js in relation to time.
/*
https://momentjs.com/docs/#/displaying/format/
Month M 1 2 ... 11 12
Mo 1st 2nd ... 11th 12th
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 ... 30 31
Do 1st 2nd ... 30th 31st
DD 01 02 ... 30 31
Day of Year DDD 1 2 ... 364 365
DDDo 1st 2nd ... 364th 365th
DDDD 001 002 ... 364 365
Day of Week d 0 1 ... 5 6
do 0th 1st ... 5th 6th
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
Day of Week (Locale) e 0 1 ... 5 6
Day of Week (ISO) E 1 2 ... 6 7
Week of Year w 1 2 ... 52 53
wo 1st 2nd ... 52nd 53rd
ww 01 02 ... 52 53
Week of Year (ISO) W 1 2 ... 52 53
Wo 1st 2nd ... 52nd 53rd
WW 01 02 ... 52 53
Year YY 70 71 ... 29 30
YYYY 1970 1971 ... 2029 2030
YYYYYY -001970 -001971 ... +001907 +001971
Note: Expanded Years (Covering the full time value range of approximately 273,790 years forward or backward from 01 January, 1970)
Y 1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Year y 1 2 ... 2020 ...
Era N, NN, NNN BC AD
Note: Abbr era name
NNNN Before Christ, Anno Domini
Note: Full era name
NNNNN BC AD
Note: Narrow era name
Week Year gg 70 71 ... 29 30
gggg 1970 1971 ... 2029 2030
Week Year (ISO) GG 70 71 ... 29 30
GGGG 1970 1971 ... 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 11 12
hh 01 02 ... 11 12
k 1 2 ... 23 24
kk 01 02 ... 23 24
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
SSSS... SSSSSSSSS
000[0..] 001[0..] ... 998[0..] 999[0..]
Time Zone z or zz EST CST ... MST PST
Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they *do* work if you are using a specific time zone with the moment-timezone addon.
Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp
x 1360013296123
*/
I love you. Errr, I mean thanks!
I'm not a coder at all. How should we interpret "Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon."? Sure enough, adding zz to the end of the format string does nothing. (To be clear, ZZ does work.)
I want to create a format string with my current date/time, time zone, UTC date/time, and UTC offset. Thanks for any ideas!
Tip: Updates to the format string only appear in OBS after switching scene collections or restarting OBS. Switching scenes was insufficient on its own. "Refresh browser when scene becomes active" is enabled, just in case that's related.
Tip: There appears to be a practical limit of 26 chars, including spaces.
how do you bold the text?
Workaround for the timezone issue along with other formatting styles:
output.innerText = moment().format(urlParams["format"] || 'MMM DD, YYYY') +"\r"+ moment().format(urlParams["format"] || 'HH:mm:ss') + " CT";
This is how it prints:
I wanted to avoid literal text to indicate the time zone for portability and not having to think about it every six months. I ended up with:
output.innerText = moment().format(urlParams["format"] || 'ddd MMM D YYYY HH:mm') + " UTC" + moment().format(urlParams["format"] || 'ZZ');
Note knowing the UTC offset is far more useful than knowing the time zone, as the only practical reason to know the time zone is to know the UTC offset. (For reasons I can't understand, everyone insists it's Standard time all year. :-D )
how do you bold the text?
@alohagirl92 you should be able to throw any CSS into the <style> element starting on line 12. I Googled "css bold text" and got font-weight: bold; as the method.
Note all the text defined by this bit of HTML will be bold, not a part within that text. I know it can be done, but I don't know how to do that kind of thing.
@raleighlittles for those who need it... you're absolutely correct. :-)
This was my preferred balance between showing the time and reducing the amount of unnecessary/distracting motion on-screen.
I was also interested in timestamping with fractional seconds. You can change how often it refreshes in lines 40-44:
original (refreshes every 1000ms):
setInterval( c = function() { output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss'); // output.innerText = moment().format(urlParams["format"] || ''); }, 1000);
updated (refreshes every 10ms):
setInterval( c = function() { output.innerText = moment().format(urlParams["format"] || 'YYYY/MM/DD HH:mm:ss.SS'); // output.innerText = moment().format(urlParams["format"] || ''); }, 10);
Nice, its looking closer to the original