jQuery addClass example

Change class name on click in jQuery

by phrad

HTML

<!--<button onclick="skillet.startCount({startingPoint: 25, endingPoint:50 });">Start in 25 count!</button>-->
  <button onclick="skillet.startCount({endingPoint:100, timerMatrix: [ 25,25,50,50,50,100,100,100,150,150,200,200,300,400,500,600,700,800,1000 ] });">Matrix count!</button>
  <button onclick="skillet.startCount();">Start count!</button>
  <button onclick="skillet.startCount({startingPoint: 25, endingPoint:27, timerMatrix: [ 2500 ], callback: function(){alert('default');} });">Callback count default</button>
  <button onclick="skillet.startCount({timerId: 'myid', startingPoint: 0, endingPoint:2, timerMatrix: [ 1000,5500,15000 ], callback: function(){alert('myid');} });">Callback count myid</button>
  <input type="text" id="txt">
  <button onclick="skillet.stopCount();">Stop count!</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


button {
  background: #0084ff;
  border: none;
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

(function( skillet, $, undefined ){
  var t;
  var timer_is_on = 0;
  var startingPoint = 0;
  var endingPoint = 99;
  var timerLapse = 1000;
  var timerMatrixIndex = 0;
  var timerMatrix = [1000];
  var callback;

  function timedCount(timerLapse) {
    console.log(timerMatrix[timerMatrixIndex]);
    if (startingPoint > endingPoint || timer_is_on === 0) {
      clearTimeout(t[timerId]);
      skillet.stopCount();
    } else {
      document.getElementById("txt").value = startingPoint;
      if (timerMatrixIndex+1 < timerMatrix.length) {
        timerMatrixIndex++;
      }  
      startingPoint++;
      callback();
      t = { timerId: setTimeout( function() {timedCount(timerMatrix[timerMatrixIndex]);} ,timerLapse) }; 
    }
  }

  skillet.startCount = function(options) {
    options = options || {}; 
    startingPoint = options.startingPoint || 0; 
    endingPoint = options.endingPoint || 100;
    timerMatrix = options.timerMatrix || [1000];//[ 25,25,50,50,50,100,100,100,150,150,200,200,300,400,500,600,700,800,1000 ];
    timerId = options.timerId || 0;
    callback = options.callback || function(){};
    timerMatrixIndex= 0 ;

    if (!timer_is_on) {
      timer_is_on = 1;
      timedCount(timerMatrix[0]);
    }
  }

  skillet.stopCount = function() {
    clearTimeout(t[timerId]);
    timer_is_on = 0;
  }
}( window.skillet = window.skillet || {}, jQuery ))