https://github.com/aurbano/html-clock
:watch: Clock made with HTML5+CSS3+JS
https://github.com/aurbano/html-clock
clock css html-clock javascript
Last synced: about 1 month ago
JSON representation
:watch: Clock made with HTML5+CSS3+JS
- Host: GitHub
- URL: https://github.com/aurbano/html-clock
- Owner: aurbano
- License: gpl-2.0
- Created: 2014-10-16T21:02:56.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2019-12-11T17:02:11.000Z (over 6 years ago)
- Last Synced: 2025-01-18T15:51:28.313Z (over 1 year ago)
- Topics: clock, css, html-clock, javascript
- Language: JavaScript
- Homepage: https://aurbano.github.io/HTML-Clock/
- Size: 515 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#HTML Clock
> Display an HTML rendered functioning clock. Probably useless, but it was interesting to code.
##Installation
Download the source code and include the files in the `src` folder (css and js). You can obviously customize the css to your needs.
It requires jQuery to work, so make sure it's included before the `html-clock.js` script.
##Usage
Add the following HTML, the `.clock` container is optional, you can have the clock occupy the full screen if you want.
```html
```
Now add the following script:
```javascript
$(document).ready(function(){
var clock = new HTMLClock();
clock.init({
container: $('#clock1')
});
});
```
##Settings
The `init` method takes one argument that is the settings used. You can set the following:
| Parameter | Values | Description |
|-------------|------------------|--------------|
| container | `$('#element')` | jQuery element where the clock should appear |
##Roadmap
The HTML clock is in a very early version, I have only spent a couple of hours on it so far, so lots of improvements need to be made. Feel free to create an issue if you spot anything that could be improved.
Future development:
* Adjustable size: Probably with a setting that will multiply all the sizes.
* Themes: Add a couple of css files that will change the appearance of the clock.
* Responsive: Similar to the adjustable size, but adapting to the container. It kind of works already, except for the fonts.
##License
The HTML Clock is released under the GNU GPLv2 License.
[](https://github.com/aurbano)