Timer in pure JavaScript
It looks really good! Here are a few points;



I don't like the arguments in your setLimit and init functions, especially because some of them are optional.

I would prefer an Object argument in this case.

function setLimit(limits) {
  finalLimit = limits.final;
  warnLimit = limits.warn;
  errorLimit = limits.error;
}


this.setLimit({
  final: 10,
  warn: 5,
  error: 8
});


This makes it obvious at call time which argument is which.



Your var declarations are inconsistent here:

var finalLimit = null,
  warnLimit = null,
  errorLimit = null;
var max = 59;
var interval = null;


Pick either to comma separate them or not. Not both.



In a couple of places you use == instead of ===. Generally we stick to === for reasons.



You CSS selectors are very generic. This is generally a bad thing as they will easily collide with other styles the moment you integrate it into a real page. 

I favour BEM syntax, which would make it look something like this;

&lt;div class="timer"&gt;
  &lt;div class="timer__labels"&gt; 
      &lt;span id="timer__hours-label"&gt;00&lt;/span&gt;
    : &lt;span id="timer__minutes-label"&gt;00&lt;/span&gt;
    : &lt;span id="timer__seconds-label"&gt;00&lt;/span&gt;

  &lt;/div&gt;
  &lt;button class="timer__btn js-start-timer"&gt;Start&lt;/button&gt;
  &lt;button class="timer__btn js-end-timer"&gt;Stop&lt;/button&gt;
  &lt;button class="timer__btn js-reset-timer"&gt;Reset&lt;/button&gt;
&lt;/div&gt;


Note I've also removed your onclick handlers in favour of interaction specific classes. I prefix my classnames with js- if they are used solely for JavaScript selectors. This helps decouple the CSS and JavaScript. 

In your code you then attach the handlers;

document.querySelectorAll('.js-start-timer')[0]
  .addEventListener('click', startTimer);