Forum

Salut Marplo,
Am incercat sa scriu un script pentru un cronometru setat de utilizator prin intermediul unui formular.Problema este ca nu imi ia valorile bine din formular (asta cred ca e ..).
Scriptul arata asa :

Cod: Selectaţi tot

<script type="text/javascript">
<!--
function cronometru(){
var minute=document.getElementById('m').value;
var secunde=document.getElementById('s').value;
if (minute==0)&&(secunde==0) return false;
else{
if (secunde==0){secunde=59;
if (minute>0) minute--;
};
secunde--;
document.getElementById('c1').innerHTML=minute;
document.getElementById('c2').innerHTML=secunde;
setTimeout("cronometru()","1000");
}
}
//-->
</script>

Si formularul asa:

Cod: Selectaţi tot

<form>
Minute: <input type="text" id="m" size="3" />&nbsp;&nbsp;Secunde : <input type="text" size="3" id="s" /><br>
<input type="button" value="START" onclick="cronometru()"/>
</form>
<span id="c1">00</span>:<span id="c2">00</span>

Ms din nou.

Salut
In primul rand este eroare de logica. Daca minutele si secundele sunt setate in interiorul functiei, cu datele din formular, la fiecare apelare a functiei, degeaba se fac calcule pt definire /scadere secunde, ca iar sunt setate la valoarea din formular.
Ar trebui aceste variabile create in afara functiei, iar valoare pt ele din formular sa fie preluata doar cand e butonul apasat.
Sunt mai multe lucruri care trebuie avute in vedere, cum ar fi scaderea minutelor cand secundele ajung la 0, si alte verificari ca sa fie evitate erorile.
Pentru invatare, poti testa si studia sciptul urmator (explicatii sunt in comentariile din cod).

Cod: Selectaţi tot

<form>
Minute: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" /> &nbsp; &nbsp; Secunde: <input type="text" id="scs" name="scs" value="0" size="2" maxlength="2" /><br/>
<input type="button" id="btnct" value="START" onclick="countdownTimer()"/>
</form>
Numaratoare inversa: &nbsp; <span id="showmns">00</span>:<span id="showscs">00</span>
<script type="text/javascript"><!--
    /* Functie pt afisare numaratoare inversa cu timpul de inceput preluat din formular */
// seteaza variabile pt minute si secunde
var ctmnts = 0;
var ctsecs = 0;
var startchr = 0;       // folosit ca sa controleze cand sa citeasca valorile din formular

function countdownTimer() {
  // https://marplo.net/ - http://www.coursesweb.net/javascript/
  // daca $startchr e 0, si campurile de formular exista, preia datele pt minute si secunde, seteaza $startchr la 1
  if(startchr == 0 && document.getElementById('mns') && document.getElementById('scs')) {
    // se asigura ca scriptul foloseste doar numere intregi
    ctmnts = parseInt(document.getElementById('mns').value) + 0;
    ctsecs = parseInt(document.getElementById('scs').value) * 1;

    // daca valoarea nu e un numar, o seteaza 0
    if(isNaN(ctmnts)) ctmnts = 0;
    if(isNaN(ctmnts)) ctmnts = 0;

    // rescrie minutele si secundele in formular, pt a fi sigur ca contine numere intregi
    document.getElementById('mns').value = ctmnts;
    document.getElementById('scs').value = ctsecs;
    startchr = 1;
    document.getElementById('btnct').setAttribute('disabled', 'disabled');     // dezactiveaza butonul
  }

  // daca minute si secunde sunt 0, seteaza $startchr 0, returneaza false
  if(ctmnts==0 && ctsecs==0) {
    startchr = 0;
    document.getElementById('btnct').removeAttribute('disabled');     // elimina "disabled" ca sa activeze butonul

    /* AICI PUTETI ADAUGA SA FIE EXECUTATA O FUNCTIE JavaScript CAND CRONOMETRU AJUNGE LA 0 */

    return false;
  }
  else {
    // scade secundele, si minutele daca secundele ajung la 0
    ctsecs--;
    if(ctsecs < 0) {
      if(ctmnts > 0) {
        ctsecs = 59;
        ctmnts--;
      }
      else {
        ctsecs = 0;
        ctmnts = 0;
      }
    }
  }

  // afiseaza timpul in pagina, si auto-apeleaza aceasta functie dupa 1 secunda
  document.getElementById('showmns').innerHTML = ctmnts;
  document.getElementById('showscs').innerHTML = ctsecs;
  setTimeout('countdownTimer()', 1000);
}
//-->
</script>

Scris: **Lun Apr 15, 2013**

Tocmai ce de 12 ore ma caznesc sa gasesc un cod bun care prin refresh sa nu se reicarce si l-am facut.
Uite poate te ajuta, ti-am pus explicatiile in el:

Cod: Selectaţi tot

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var timp = new Date();
var s3= timp.getSeconds(); //data curenta
var m3= timp.getMinutes();
var h3= timp.getHours();
var z3= timp.getDay();


///datele din variabilele s1,m1,h1,z1 sunt date din msql si sunt calculate astfel
//timpul actual+timpul propus
//scriptul de calcul se face in php iar datele obtinute sunt introduse in msql

var s1=36;
var m1=23;
var h1=2;
var z1=1;
//facem calculul scadem datele msql-timpul real
var s=s1-s3;
var m=m1-m3;
var h=h1-h3;
var z=z1-z3;
//dam val de inceput 0 campului input
document.ceas.ceasmerge.value='0'
//deschidem functia
function Ceas(){
//setam functia sa mearga cronometru in parametri normali
if (s==0) {
if(m==0){
s=0
m=0
}else{
s=60
m=m-1
}
}else if(m==0){
if (h==0){
m=0
h=0
}else{
m=60
h=h-1
}
}else if(h==0){
if (z==0){
h=0
z=0
}else{
h=24
z=z-1
}
}
//verificam cand ajunge la 0:0:0:0
if (z==0 && h==0 && m==0 && s==0){
//aici se executa codul cand cronometru a ajuns la 0
}else{
//daca cron nu a ajuns la zero numaratoarea continua
s-=1
}
//setam valoarea obtinuta in input
document.ceas.ceasmerge.value= z+":"+h+":"+m+":"+s
setTimeout('Ceas()',1000) //reapela o data pe sec functia
}
Ceas();
</script>
<style type="text/css">
input{
font-size:15px;
font-weight:bold;
}
</style>
</head>
<body onload="Ceas();">

<form name="ceas">
Timpul <input type="text" size="18" name="ceasmerge" />
</form><br/>
Creaza un formular in care pui cat timp vrei sa cronometrezi: datele sunt introduse intro baza de date.
<form>
<table border="0"><tr><th>Zile</th><th>Ore</th><th>Minute</th><th>Secunde</th></tr><tr>
<td><input type="text" size="18" name="zile" /></td><td><input type="text" size="18" name="ore" /></td><td><input type="text" size="18" name="minute" /></td><td><input type="text" size="18" name="secunde" /></td></tr>
<tr><td><input value="Trimite" type="submit"></td></tr></table>
</form>

</body>
</html>

Forum

Cronometru JavaScript cu Numaratoare inversa

Cronometru JavaScript cu Numaratoare inversa

Cronometru JavaScript cu Numaratoare inversa

Cronometru JavaScript cu Numaratoare inversa