Instanciar cronômetros diferentes na mesma página (javascript) #1075
Replies: 2 comments
-
|
Não entendi muito bem sua necessidade, mas acho que eu faria algo nesse sentido: https://jsfiddle.net/e4pe3q9t/ <div id="callbackExample0">
<span>Timer 0</span>
<h1>
<div class="values"></div>
</h1>
</div>
<div id="callbackExample1">
<span>Timer 1</span>
<h1>
<div class="values"></div>
</h1>
</div>
<div id="callbackExample2">
<span>Timer 2</span>
<h1>
<div class="values"></div>
</h1>
</div>
<div id="callbackExample3">
<span>Timer 3</span>
<h1>
<div class="values"></div>
</h1>
</div>
<div id="callbackExample4">
<span>Timer 4</span>
<h1>
<div class="values"></div>
</h1>
</div>function makeTimer(selector, seconds = Math.floor(Math.random() * 20)) {
// setup
var $element = document.querySelector(selector);
var timer = new Timer();
timer.start({
startValues: {
seconds: seconds
}
});
$element.innerHTML = timer.getTimeValues().toString();
var interval = setInterval(function() {
$element.innerHTML = timer.getTimeValues().toString();
}, 1000);
}
makeTimer('#callbackExample0 .values', 0);
makeTimer('#callbackExample1 .values', 10);
makeTimer('#callbackExample2 .values', 20);
makeTimer('#callbackExample3 .values', 30);
makeTimer('#callbackExample4 .values', 40);Ainda seria possível fazer um retorno para poder controlar pause, reset, stop etc... obs: removi o JQuery das dependências e estou considerando que o script será inserido no footer do seu UPDATE: Dei uma lida melhor na documentação e melhorei o JS para ficar mais simples (sem |
Beta Was this translation helpful? Give feedback.
-
|
Mano ...fiquei feliz com a resposta...vou olhar quando chegar em casa ;) e te dou um retorno. vocês são feras! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Cara
, usando o Easytimer de Albert Gonzales - https://albert-gonzalez.github.io/easytimer.js/
fiz um teste para instanciar vários cronômetros com inicios de contagem aleatórios.
No código que vou compartilhar faço isso de forma tosca...a partir da linha 23.
https://gist.github.com/trevobr/37b7e9947a33a3a939ff154f2e7e178a
Queria saber a forma 'elegante' de fazer o mesmo.
Você que é ninja no javascript, pode me ajudar?
p.s: Coloquei o código zipado aqui também.
cronometros.zip
Desde já agradeço a ajuda.
Beta Was this translation helpful? Give feedback.
All reactions