css动画取消事件,使用CSS3动画事件（animation events）实现的时钟

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var clock;

function Clock() {

this.domEl = document.getElementById('clock');

// we could update the animation duration directly in JS with the

// following piece of code as well, here to set it to 1 second for instance:

// this.container.style.animationDuration="1s";

}

Clock.prototype.start = function() {

var func = this.tick.bind(this);

this.domEl.addEventListener("oAnimationIteration", func, false);

this.domEl.addEventListener("MSAnimationIteration", func, false);

this.domEl.addEventListener("webkitAnimationIteration", func, false);

this.domEl.addEventListener("mozAnimationIteration", func, false);

this.domEl.addEventListener("animationiteration", func, false);

};

/**

* Update the clock time. Method called on each animation interation

**/

Clock.prototype.tick = function() {

var date = new Date();

// we add zero paddings just for make it prettier

// source: http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript#comment-33639551

this.domEl.innerHTML = ("00" + date.getHours()).substr(-2, 2) + ':' + ("00" + date.getMinutes()).substr(-2, 2) + ':' + ("00" + date.getSeconds()).substr(-2, 2) + ' ' + ("000" + date.getMilliseconds()).substr(-3, 3) + 'ms';

};

clock = new Clock();

clock.start();