-
-
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> |
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);
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.