-
-
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> |
@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);
@alohagirl92 you should be able to throw any CSS into the
<style>element starting on line 12. I Googled "css bold text" and gotfont-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.