-
-
Save appleneko2001/88c4ab9f0b2235e8f97b2ee5da9d4e85 to your computer and use it in GitHub Desktop.
個人修改版Clock with Browser source for OBS Studio
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body translate="no" > | |
| <div id="output"></div> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js'></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.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]); | |
| })(); | |
| // Set moment.js locale to zh-tw | |
| moment.locale('zh-tw'); | |
| 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().tz("Asia/Taipei").format(urlParams["format"] || ''); | |
| }, 1000); | |
| c(); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is clock for OBS Studio use. It uses moment.js and moment-timezone.js library for handles clock formats, timezones and etc.
Usage
In OBS Studio, you have to add an
browser sourceto your scene, and copy next url to URL fieldhttps://gistcdn.githack.com/appleneko2001/88c4ab9f0b2235e8f97b2ee5da9d4e85/raw/0313439048780b10a776df1304d6014903e7dfd6/clock.htmlFormat of moment.js can be determined in moment.js -> Format Dates.
For example, you want a clock looks like that:
your url should be looks like this:
https://gistcdn.githack.com/appleneko2001/88c4ab9f0b2235e8f97b2ee5da9d4e85/raw/0313439048780b10a776df1304d6014903e7dfd6/clock.html?format=YYYY MMMM DD, h:mm:ss aCredit of original gist: https://gist.github.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad
Credit of idea: Youtube@IT9GameLog
Referenced resource: Raw Githack