Visualizzazione risultati 1 fino 3 di 3

Discussione: [JavaScript ]Problema countdown

  1. #1
    Guest

    Predefinito [JavaScript ]Problema countdown

    Premetto che non ho capito se il mio è un problema di js o php.
    Devo far partire un countdown in javascript. Se imposto manualmente la data finale nello script js, funziona. Ma mi serve impostarlo dinamicamente in php, ma così il problema è che ci sono sempre 5-6 secondi in più, cioè invece di partire da 01:00:00, il countdown parte da 01:00:06. (a volte anche 8-9 secondi in più)

    Lo script è questo:

    Codice:
    <script language="JavaScript">
    TargetDate = "<? echo $fine ?>";
    BackColor = "";
    ForeColor = "white";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    </script>
    <script language="JavaScript" src="countdown.js"></script>
    $fine è una variabile che contiene una data del tipo "Y/m/d H:i:s".

    il file countdown.js:

    Codice:
    function calcage(secs, num1, num2) {
      s = ((Math.floor(secs/num1))%num2).toString();
      if (LeadingZero && s.length < 2)
        s = "0" + s;
      return "<b>" + s + "</b>";
    }
    
    function CountBack(secs) {
      if (secs < 0) {
        //document.getElementById("cntdwn").innerHTML = FinishMessage;
        self.location.href="home.php";
        return;
      }
      DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
      DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
      DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
      DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
    
      document.getElementById("cntdwn").innerHTML = DisplayStr;
      if (CountActive)
        setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
    }
    
    function putspan(backcolor, forecolor) {
     document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                    "; color:" + forecolor + "'></span>");
    }
    
    if (typeof(BackColor)=="undefined")
      BackColor = "white";
    if (typeof(ForeColor)=="undefined")
      ForeColor= "black";
    if (typeof(TargetDate)=="undefined")
      TargetDate = "12/31/2020 5:00 AM";
    if (typeof(DisplayFormat)=="undefined")
      DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    if (typeof(CountActive)=="undefined")
      CountActive = true;
    if (typeof(FinishMessage)=="undefined")
      FinishMessage = "";
    if (typeof(CountStepper)!="number")
      CountStepper = -1;
    if (typeof(LeadingZero)=="undefined")
      LeadingZero = true;
    
    
    CountStepper = Math.ceil(CountStepper);
    if (CountStepper == 0)
      CountActive = false;
    var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
    putspan(BackColor, ForeColor);
    var dthen = new Date(TargetDate);
    var dnow = new Date();
    if(CountStepper>0)
      ddiff = new Date(dnow-dthen);
    else
      ddiff = new Date(dthen-dnow);
    gsecs = Math.floor(ddiff.valueOf()/1000);
    CountBack(gsecs);
    Uso questa funzione (per un countdown di un'ora):

    Codice PHP:
    $fine = date("Y/m/d H:i:s", time() + 3600);

  2. #2
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    Diciamo che il problema è dovuto a più cause. Ti spiego qui come viene caricata la tua pagina PHP:
    - l'interprete PHP genera il codice HTML/JavaScript sulla base dei calcoli che specifichi. Questo avviene sui server di AV.
    - generato il codice (ora che è HTML/JavaScript puro), viene inviato al tuo browser perché lo scarichi
    - quanto il tuo browser avrà scaricato tutto il codice HTML e i file che decidi di collegare (ad esempio immagini o file esterni), inizierà ad eseguire JavaScript.

    Altra cosa di cui devi tenere conto è che PHP e JavaScript usano due diversi orologi di sistema: PHP quello dei server di AlterVista, JavaScript quello del computer dell'utente. Addirittura, probabilmente se quel tuo script fosse eseguito in un computer in Inghilterra, il ritardo non sarebbe di pochi secondi ma di un'ora (a causa del diverso fuso orario).

    Per questo motivo, l'unica cosa che ti resta da fare è utilizzare JavaScript, in modo che il countdown utilizzi sempre lo stesso orologio (male che vada sarà quello dell'utente, che, a meno che questi non si metta a smanettare sull'orario del suo PC, funziona ugualmente bene). Ti basta modificare soltanto la prima riga del tuo script inserendoci questa (sperando di ricordarmi bene le funzioni con le date):
    Codice:
    TargetDate = new Date ().addSecond (3600).toGMTString ();
    Stammi bene...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  3. #3
    Guest

    Predefinito

    Anzitutto ti ringrazio per la risposta completa ed esauriente, finalmente qualcuno ha capito il nocciolo del problema ;)

    Il problema dell'utente che può modificare l'orario del proprio pc non ha importanza, poichè quando la pagina viene caricata l'orario finale viene preso dal database.

    Comunque, ho provato ad inserire la riga che mi hai proposto ma il countdown non funziona, parte da 4995 Days, 16 Hours, 10 Minutes, 05 Seconds.

    EDIT: In realtà ho visto che se modifico l'orario (ad esempio portandolo avanti) del mio pc, si ha un altro problema. Ho impostato un countdown di 1 minuto e ho portato avanti il mio orologio di un minuto, quindi in locale il countdown viene considerato scaduto. Quindi la pagina viene ricaricata ma poichè al caricamento viene effettuato un controllo per vedere se l'orario di scadenza è minore dell'orario attuale (e fin quando non passa effettivamente quel minuto, non lo è), viene ricaricato il countdown che però scade subito. Quello che succede quindi è un continuo caricamento della pagina, per un minuto.
    In parole povere mi servirebbe un countdown basato solo e unicamente sull'orario del server :(

    EDIT2: Tutto risolto! Ci ho ragionato un pò e ho aggiunto una variabile nel js, "StartDate = date("m/d/Y H:i:s")". Poi nel file countdown.js ho modificato la riga var dnow = new Date(); in var dnow = new Date(StartDate);
    In tal modo, data finale e data attuale sono calcolate tramite php quindi non c'è sfasamento nè il problema del cambio dell'orario locale :)
    Ultima modifica di davser : 28-04-2007 alle ore 16.25.34

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •