https://github.com/aaronleocooper/accu-timer
A super-simple JS timer that corrects itself to keep time accurately
https://github.com/aaronleocooper/accu-timer
Last synced: 9 months ago
JSON representation
A super-simple JS timer that corrects itself to keep time accurately
- Host: GitHub
- URL: https://github.com/aaronleocooper/accu-timer
- Owner: AaronLeoCooper
- Created: 2016-03-04T09:10:33.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-03T12:13:11.000Z (over 9 years ago)
- Last Synced: 2025-02-02T03:27:55.825Z (11 months ago)
- Language: JavaScript
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A _really_ basic JS timer that self-corrects.
Use this however you wish.
`index.html` provides a simple timer example (as in the screenshot below).
`index.js` is where the meat of the code is.
## How...?
Just create a new instance of **AccuTimer** and pass in options relevant to your html like so:
```javascript
// JS
var opts = {
seconds: '#input-seconds',
minutes: '#input-minutes',
hours: '#input-hours',
startButton: '#start-timer',
resetButton: '#reset-timer',
};
var timer = new AccuTimer(opts);
```
```html
Start
Reset
```
## No, I mean.. How does this work??
Oh.
For starters I'd _highly_ recommend having a look at [**James Edward's**](http://www.sitepoint.com/creating-accurate-timers-in-javascript/) fantastic article on the matter. He inspired me to create this micro-project, and many other web devs out there.
But the short version is: it uses Javascript's native ``setTimeout`` to perpetuate the timer, paired with some simple code to compare against Javascript's ``Date`` object and correct itself.
## No dependencies
Nope, not even jQuery.
Although I've included the beautiful **Bulma** framework for the CSS in my html, this is absolutely not required.
## Compatibility
I haven't tested this in anything other than the latest version of Chrome, so use at your own risk.
## Future development?
Maybe. I created this little thing very quickly and for the purpose of using it in something in the near future, however I don't yet know whether more functionality is required. I just wanted to put this up somewhere for my future reference, as well as for anyone else who wants to incorporate and/or extend the functionality for their own purposes.
## Thanks to...
Heavily inspired by _(just like most other accurate JS timers out there)_ **James Edward's** post here:
http://www.sitepoint.com/creating-accurate-timers-in-javascript/
It's been around for a few years already, but still very useful. Credit to the guy!
Also a big thanks to the fantastic **2359 Media** who I currently work with. You guys are awesome.