Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Minutnik w js, pobieranie czasu z inputa
Forum PHP.pl > Forum > Przedszkole
michal_s
Chcę zrobić minutnik, który będzie pobierał ilość minut do odliczenia z inputa i po kliknięciu buttona go odliczał. Mam coś takiego:

  1. <span id="runner">00:00</span>
  2. <script type="text/javascript">
  3. var ile = $( "#czas" ).val();
  4. $('#runner').runner({
  5. autostart: false,
  6. countdown: true,
  7. milliseconds: false,
  8. startAt: ile * 60 * 1000,
  9. });
  10. <input id="czas"/>
  11. <button onclick="$('#runner').runner('start');" id="startujemy">Start</button>


Gdy zamiast 'ile' wstawię jakąś cyfrę to wszystko działa... Tylko nijak nie mogę zrobić, żeby pobierało to z tego inputa. Może być, że po prostu robię jakąś głupotę, bo jestem początkujący

Wykorzystuję ten plugin http://www.jqueryscript.net/time-clock/jQu...mer-runner.html
Comandeer
Bo ustalasz wartość opcji startAt zanim coś wpiszesz w to pole. Całość skryptu powinien inicjować dopiero po kliku
michal_s
Faktycznie. Jak teraz dałem
  1. <input type="text" id="czas" value="4">


To pojawiło mi się odliczanie od 4. Jak teraz zrobić żeby to się wczytywało po kliknięciu? Dzięki za pomoc!
trueblue
Kod
<span id="runner">00:00</span>
<script type="text/javascript">

$('#runner').runner({
    autostart: false,
    countdown: true
    
});

</script>
<input id="czas"/>
<button onclick="$('#runner').runner('reset',{countdown:true,startAt:$('#czas').val()*60*1000});$('#runner').runner('start');" id="startujemy">Start</button>

Proponuję abyś zerknął w dokumentację jQuery jak podpinać zdarzenia do elementów.

W pliku jquery.runner.js zmień:

w linii 213:
z: Runner.prototype.reset = function(stop) {
na: Runner.prototype.reset = function(options, stop) {

w linii 271:
z: runner.reset(options);
na: runner.reset(options,stop);

w linii 214:
po: var nowTime;
dodaj: this.settings=options;
Comandeer
http://jsfiddle.net/Comandeer/4fsmeewy/
michal_s
Dzięki wielkie!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.