JSFiddle - React, Tailwind, and code Playground
by Alfie
HTML
BB=Big blind
<br>SB = Small blind
<br>
<button id="start">Start</button>
<button id="pause">Pause</button>
<br>
<label id="level">Current Level : <b>0</b>
</label>
<div class="container">
<label id="minutes">MM</label>
<label>:</label>
<label id="seconds">SS</label>
</div>
<div>
<label id="current">Current Big blind/Small blind</label>
</br>
<label id="next">Next big blind/Small blind</label>
</div>
<hr>
CSS
body {
font-family:'Helvetica', 'Arial', 'Sans-serif';
}
.container {
font-size: 60px;
font-weight:bold;
color:#176db3;
margin: 20 20 10 10;
}
.active{
color:green;
font-size:20px;
}
JavaScript
;
(function ($) {
$.timer = function (func, time, autostart) {
this.set = function (func, time, autostart) {
this.init = true;
if (typeof func == 'object') {
var paramList = ['autostart', 'time'];
for (var arg in paramList) {
if (func[paramList[arg]] != undefined) {
eval(paramList[arg] + " = func[paramList[arg]]");
}
};
func = func.action;
}
if (typeof func == 'function') {
this.action = func;
}
if (!isNaN(time)) {
this.intervalTime = time;
}
if (autostart && !this.isActive) {
this.isActive = true;
this.setTimer();
}
return this;
};
this.once = function (time) {
var timer = this;
if (isNaN(time)) {
time = 0;
}
window.setTimeout(function () {
timer.action();
}, time);
return this;
};
this.play = function (reset) {
if (!this.isActive) {
if (reset) {
this.setTimer();
} else {
this.setTimer(this.remaining);
}
this.isActive = true;
}
return this;
};
this.pause = function () {
if (this.isActive) {
this.isActive = false;
this.remaining -= new Date() - this.last;
this.clearTimer();
}
return this;
};
this.stop = function () {
this.isActive = false;
this.remaining = this.intervalTime;
this.clearTimer();
return this;
};
this.toggle = function (reset) {
if (this.isActive) {
...