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