Clock.html GitHub File
- Download the HTML File
- In OBS add a Browser Source
- Select local file
- Browse to the clock.html file
- adjust the height and width accordingly
Lines 13 through 20 is where you can change the visual options like font type and color.
The lines look like this and make sure to put your settings between the : and the ;
Code:
font-family: monospace;
font-size: 30px;
text-align: right;
color: lightgray;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);Line 43 is where you can customize the text, by default it will be
Day/Month/Year 24:mm:ss
By default line 43 will look like this:
Code:
output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss 'This is what I use for line 43:
Code:
output.innerText = moment().format(urlParams["format"] || 'MMM DD, YYYY | hh:mm:ssa'Make sure that your format text stays in-between the ' ' at the end of the line.
Here is a list of all the format options for the date and time line.
link to update format options
| Description | Token | Output |
|---|---|---|
| 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 |
Updated code as of Oct 6, 2022
Code:
<!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');
// ^ old string, above, new preferred below:
output.innerText = moment().format('LL LTS [GMT]ZZ');
}, 1000);
c();
</script>
</body>
</html>
