title: Complex Timers in javascript and design pattern
body: <p>I'm currently building an app that is an overlay to a game. This app takes in game events and creates objects to make timers. Every timer is different depending on what events the app took from the game. What is the best design pattern for this situation?</p>
  
  <p>this is the timer and the other one is a function that writes in a html file</p>
  
  <pre><code>function startTimer(duration, display) {
      var timer = duration;
      var minutes, seconds;
      setInterval(function () {
          minutes = parseInt(timer / 60, 10)
          seconds = parseInt(timer % 60, 10);
  
          minutes = minutes &lt; 10 ? "0" + minutes : minutes;
          seconds = seconds &lt; 10 ? "0" + seconds : seconds;
  
          display.textContent = minutes + ":" + seconds;
  
          if (--timer &lt; 0) {
              timer = duration;
          }
      }, 1000);
  }
  
  var writeSum = function(sums, champ){
      var height = "height: 25px;";  
      var width = "width: 25px;";
      var size = "background-size: 25px 25px;";
      var image = "background-image: url( '../../icons/summoner spells/"+sums.path + "\' );";
      var display = "display: inline;";
      var click = "onclick =\"startTimer("+ sums.cd+", document.getElementById('"+ champ.name+ sums.name+"'\)\)\" ";
  
      return tag("div","",tag("button", click+style(height+width+image+size),"")+ tag("p","id = \""+champ.name+ sums.name + "\" "+style(display),"Ready"));
  };
  </code></pre>