A Polymer timer element. Have your variables updated with the current time in a fixed interval.
Description
The kc-timer is a Polymer element which fills bound variables with timer values like:
timestamp, milliseconds, seconds, minutes, hours, day, month, year and date
You can choose any combination of these values and set a specific interval to update the variables.
There is also a timer
event you can listen to.
Source
The kc-timer project is hosted on GitHub.
Install package
You can install the package from Bower.io and add this element to your project:
$ bower install kc-timer
To use the bower command, you'll need some dev tools first:
Install both and then run this command to install bower to the global node cache:
$ npm install -g bower
See the offical bower help for more details.
Demo
Find the complete demo source here: Demo on GitHub
This will give you data-bound variables for each possible timer property. Note that you'll need to set the output
property for each value that should be updated.
You also need to enable the timer via the active
property. You may set this through code or data-binding, too.
Finally the fire-on-activate
attribute, will ensure, that the timer is fired once it is activated. Otherwise it will take one timer cycle to set the bound variables.
<kc-timer interval="1000"
timestamp="{{ts}}"
milliseconds="{{ms}}"
seconds="{{sec}}"
minutes="{{min}}"
hours="{{hr}}"
day="{{dow}}"
date="{{dat}}"
month="{{mon}}"
year="{{y}}"
output="ts,ms,sec,hr,min,dow,dat,mon,y"
active
fire-on-activate>
</kc-timer>
The full demo uses these variables to output them and it looks like this: