albert-gonzalez / Easytimer.js
Licence: mit
Easy to use Timer/Stopwatch/Countdown library compatible with AMD, ES6 and Typescript
Stars: ✭ 562
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
es6
455 projects
Projects that are alternatives of or similar to Easytimer.js
React Countdown Circle Timer
Lightweight React/React Native countdown timer component with color and progress animation based on SVG
Stars: ✭ 220 (-60.85%)
Mutual labels: timer, countdown
React Countdown
React Component showing a countdown to certain date and time.
Stars: ✭ 58 (-89.68%)
Mutual labels: timer, countdown
use-countdown-timer
React hook exposing a countdown timer with optional expiration reset callbacks
Stars: ✭ 31 (-94.48%)
Mutual labels: countdown, timer
Countdowntask
⌛️A countdown library for Android.
Stars: ✭ 64 (-88.61%)
Mutual labels: timer, countdown
React Native Countdown Component
React Native CountDown
Stars: ✭ 193 (-65.66%)
Mutual labels: timer, countdown
Flipdown
⏰ A lightweight and performant flip styled countdown clock
Stars: ✭ 136 (-75.8%)
Mutual labels: timer, countdown
tiny-timer
🕑 Small countdown timer and stopwatch module.
Stars: ✭ 39 (-93.06%)
Mutual labels: countdown, timer
react-timer-wrapper
Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.
Stars: ✭ 14 (-97.51%)
Mutual labels: countdown, timer
Termdown
Countdown timer and stopwatch in your terminal
Stars: ✭ 749 (+33.27%)
Mutual labels: timer, countdown
react-component-countdown-timer
This is a simple count down timer react component.
Stars: ✭ 18 (-96.8%)
Mutual labels: countdown, timer
Countdownlabel
Simple countdown UILabel with morphing animation, and some useful function.
Stars: ✭ 714 (+27.05%)
Mutual labels: timer, countdown
Flip Clock
A flip clock, timer and countdown made with Polymer
Stars: ✭ 69 (-87.72%)
Mutual labels: timer, countdown
CountdownTimer-TeLeTiPs
The very first powerful Telegram bot to countdown to your important events in any group chat. Live countdown timer (days : hours : minutes : seconds)
Stars: ✭ 122 (-78.29%)
Mutual labels: countdown, timer
alfred-timer-workflow
Alfred workflow to start a timer, which blinks when the time is up.
Stars: ✭ 39 (-93.06%)
Mutual labels: countdown, timer
Web-Time-Tracker
Plugin named Timetracker is a time counter that works in both increase and decrease directions.
Stars: ✭ 21 (-96.26%)
Mutual labels: countdown, timer
Mixitup
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
Stars: ✭ 4,431 (+688.43%)
Mutual labels: vanilla-js
easytimer.js
Easy to use Timer/Chronometer/Countdown library compatible with AMD and NodeJS
Install
NPM
npm install easytimer.js --save
Bower
bower install easytimer.js
Library Load
Script
<script src="lib/easytimer/dist/easytimer.min.js"></script>
<script>
var timerInstance = new easytimer.Timer();
</script>
Node
var Timer = require("easytimer.js").Timer;
var timerInstance = new Timer();
// or
var { Timer } = require("easytimer.js");
var timerInstance = new Timer();
ES6 / Typescript Imports
import Timer from "easytimer.js";
const timer = new Timer();
// or
import { Timer } from "easytimer.js";
const timer = new Timer();
AMD
require(["node_modules/easytimer.js/dist/easytimer.min.js"], function (
easytimer
) {
var timer = new easytimer.Timer();
});
// or
require(["node_modules/easytimer.js/dist/easytimer.min.js"], function ({
Timer,
}) {
var timer = new Timer();
});
Examples
http://albert-gonzalez.github.io/easytimer.js/
Basic Usage
var timer = new Timer(/* default config */);
timer.start(/* config */);
timer.addEventListener("secondsUpdated", function (e) {
$("#basicUsage").html(timer.getTimeValues().toString());
});
React
If you want to use EasyTimer with React, you can use the EasyTimer React Hook. You can check out the hook documentation here:
Timer instance API
- start(config): Start the timer
- Parameters:
- config (object):
- startValues (object or array): The initial values of the timer when it is started
- Accepted Values: Object with some of these keys: 'secondTenths', 'seconds', 'minutes', 'hours', 'days'. Or an array with this 5 positions: [secondTenths, seconds, minutes, hours, days]
- Default Value (object or array): [0,0,0,0,0]
- target (object or array): The target values that will make the timer to stop.
- Accepted Values: Object with some of these keys: 'secondTenths', 'seconds', 'minutes', 'hours', 'days'. Or an array with this 5 positions: [secondTenths, seconds, minutes, hours, days]
- Default Value: Undefined
- precision (string): The timer update frequency.
- Accepted Values: 'secondTenths', 'seconds', 'minutes', 'hours'
- Default value: 'seconds'
- callback (function): A callback function executed every time the timer is updated. The callback receives the timer as a parameter.
- countdown (bool): If true, the timer is a countdown.
- startValues (object or array): The initial values of the timer when it is started
- config (object):
- You can pass this same config when a Timer instance is created. For example:
new Timer({ target: { seconds: 10 } })
. This default config will be merged with the config passed to the start function.
- Parameters:
- stop(): Stop the timer
- pause(): Pause the timer. After pause, you can call the start method without parameters to resume the timer.
- reset(): Reset the timer values
- isRunning(): Returns true if the timer is currently running.
- isPaused(): Returns true if the timer is paused.
- addEventListener(eventType, callback): Add a listener to an event. Timer triggers events when is updated
- Events triggered:
- secondTenthsUpdated
- secondsUpdated
- minutesUpdated
- hoursUpdated
- daysUpdated
- targetAchieved
- stopped
- reset
- started
- paused
- Parameters:
- eventType (string): The type of the event that you want to listen.
- callback (function): Function that will be executed when the timer triggers the specified event. The callback receives an object with the timer as a parameter.
- Events triggered:
- on(eventType, callback): addEventListener alias.
- removeEventListener(eventType, callback): Remove an event listener from the timer. Same usage as addEventListener.
- off(eventType, callback): removeEventListener alias.
- getTimeValues(): Returns an object with the current values. The keys of the returned object are 'secondTenths', 'seconds', 'minutes', 'hours' and 'days'.
- getTotalTimeValues(): Returns an object with the current absolute values. The keys of the returned object are 'secondTenths', 'seconds', 'minutes', 'hours' and 'days'.
- getConfig(): Returns the configuration parameters.
Browser Support
Easytimer uses dispatchEvent, and this feature is available in these Browsers:
- Chrome (version >= 4)
- Firefox (version >= 2)
- IE (version >= 9)
- Opera (version >= 9)
- Safari (version >= 3)
- Mobile browsers
Known Issues
This library uses the Date class to calculate timer values. Date uses the system clock. If this clock is changed to a different date while the timer is running the timer values will be incorrect after that. If you know a way to fix that without losing time precision, please collaborate!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].