Javascript Inserimento Data.

samuelpana

Nuovo Utente
22 Dic 2016
17
0
1
40
Ragazzi vorrei creare una finestra dove si possa inserire la data manualmente invece di inserirla nel codice (parlo della var tl = new Date ecc)
Come potrei fare? Ovviamente dovrà esserci anche un pulsante di START e RESET, qualcuno mi puà aiutare?
Codice:
function CountdownTimer(elm,tl,mes){
 this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
 initialize:function(elm,tl,mes) {
  this.elem = document.getElementById(elm);
  this.tl = tl;
  this.mes = mes;
 },countDown:function(){
  var timer='';
  var today=new Date();
  var day=Math.floor((this.tl-today)/(24*60*60*1000));
  var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  var me=this;
  if( ( this.tl - today ) > 0 ){
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">Giorno</div><span class="number day">'+day+'</span></span>';
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">Ora</div><span class="number hour">'+hour+'</span></span>';
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">Minute</div><span class="number min">'+this.addZero(min)+'</span></span><span class="number-wrapper"><div class="line"></div><div class="caption">Secondi</div><span class="number sec">'+this.addZero(sec)+'</span></span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT(){
 // Data finale del timer
 var tl = new Date('2017/06/05 00:00:00');
 
 // Qui puoi aggiungere un messaggio dopo la scaduta del tempo del taimer
 var timer = new CountdownTimer('CDT',tl,'<span class="number-wrapper"><div class="line"></div><span class="number end">Tempo scaduto!</span></span>');
 timer.countDown();
}
window.onload=function(){
 CDT();
}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Puoi passarla come parametro alla funzione
Codice:
function CDT(date) {
        // Data finale del timer
        var tl = new Date(date);

HTML:
<input type="text" id="start" value="2017/06/05 00:00:00"/>
<input type="button" value="start" onclick="CDT(document.getElementById('start').value)"/>
<div id="CDT"></div>
 

samuelpana

Nuovo Utente
22 Dic 2016
17
0
1
40
Puoi passarla come parametro alla funzione
Codice:
function CDT(date) {
        // Data finale del timer
        var tl = new Date(date);

HTML:
<input type="text" id="start" value="2017/06/05 00:00:00"/>
<input type="button" value="start" onclick="CDT(document.getElementById('start').value)"/>
<div id="CDT"></div>
Scusa ma non va bene, in pratica vorrei creare un programma di countdown, e facendo come dici ogni volta che riavvio il browser il conto si resetta.
In pratica dovrei inserire 1 ora e inizia a fare il conto e dopo 1 ora si ferma, anche se chiudo la pagina.
Ti scrivo il codice del programma completo che ho abbandonato perchè non so come non far ricominciare da capo il timer quando si chiude la pagina, se sapresti aiutarmi tene sarei davvero grato.
Codice:
<font color="#0000FF" size="15">
<font color="#0000FF" size="15">Countdown Timer: </font> &nbsp&nbsp&nbsp; <span id="showmns"><font color="#0000FF" size="17">00
</font></span>:<span id="showscs"><font color="#0000FF" size="17">00</font></span> &nbsp&nbsp&nbsp
<font color="#0000FF" size="15">Minutes: </font><font color="#0000FF" size="17"> <input type="text" id="mns" name="mns" value="1440" size="3" maxlength="3" /> </font>&nbsp; &nbsp; <font color="#0000FF" size="17"> Seconds: </font> <input type="text" id="scs" name="scs" value="0" size="2" maxlength="2" />
 <form action="#" method="post">
<input type="button" id="btnct" value="START" />
<input type="button" id="btnct_res" value="RESTART" />
<input type="button" id="btnct_end" value="END" />
</form>
<script>
// <![CDATA[
function CountdownTimer(obnm){
 // http://coursesweb.net/javascript/
  var endct =0;  // it is set to 1 when script starts
  var ctmnts =0;  // minutes
  var ctsecs =0;  // seconds
  var startchr =0;  // used to control when to read data from form, and script finished
  var ctpause =-1;  //if -1, pause the script

  //get html elms.
  var el_showmns = document.getElementById('showmns');
  var el_showscs = document.getElementById('showscs');
  var el_mns = document.getElementById('mns');
  var el_scs = document.getElementById('scs');
  var el_btnct = document.getElementById('btnct');
  var el_btnct_res = document.getElementById('btnct_res');
  var el_btnct_end = document.getElementById('btnct_end');

  //to start/pause/resume Countdown Timer
  function startPauseCT(){
    if(parseInt(el_mns.value) >0 || parseInt(el_scs.value)>0 || endct ==1){
      ctpause *=-1;
      if(ctpause ==1){ //Start and set next click as Pause
        el_btnct.value ='PAUSE';
        window[obnm].countdownTimer();
      }
      else el_btnct.value ='RESUME';
    }
  }

  // HERE YOU CAN ADD TO EXECUTE JavaScript instructions WHEN COUNTDOWN TIMER REACHES TO 0
  function endCT(){
    // HERE ADD YOUR CODE

    return false;
  }

  this.countdownTimer = function(){
    // if $startchr is 0, and form fields exists, gets data for minutes and seconds, and sets $startchr to 1
    if(startchr == 0 && el_mns && el_scs) {
      // makes sure the script uses integer numbers
      ctmnts = parseInt(el_mns.value);
      ctsecs = parseInt(el_scs.value);

      // if data not a number, sets the value to 0
      if(isNaN(ctmnts)) ctmnts = 0;
      if(isNaN(ctsecs)) ctsecs = 0;

      // rewrite data in form fields to be sure that the fields for minutes and seconds contain integer number
      el_mns.value = ctmnts;
      el_scs.value = ctsecs;
      startchr = 1;
    }

    if(ctmnts >0 || ctsecs >0) endct =1;  //to can call endCT() at the ending

    // if minutes and seconds are 0, call endCT()
    if(ctmnts==0 && ctsecs==0 && endct ==1){
      startchr =0;
      ctpause =-1;
      endct =0;
      el_btnct.value ='START';
      endCT();
    }
    else if(startchr ==1 && ctpause ==1){
      // decrease seconds, and decrease minutes if seconds reach to 0
      ctsecs--;
      if(ctsecs < 0){
        if(ctmnts > 0) {
          ctsecs = 59;
          ctmnts--;
        }
        else {
          ctsecs = 0;
          ctmnts = 0;
        }
      }
      setTimeout(obnm +'.countdownTimer()', 1000); //auto-calls this function after 1 seccond
    }

    // display the time in page
    el_showmns.innerHTML = ctmnts;
    el_showscs.innerHTML = ctsecs;
  }

  //set event to button that starts the Countdown Timer
  if(el_btnct) el_btnct.addEventListener('click', startPauseCT);

  //restart Countdown Timer from the initial values
  if(el_btnct_res) el_btnct_res.addEventListener('click', function(){ startchr =0; if(ctpause ==-1) startPauseCT(); });

  //ending Countdown Timer, sets 0 form data
  if(el_btnct_end) el_btnct_end.addEventListener('click', function(){ el_mns.value =0; el_scs.value =0; startchr =0; startPauseCT(); });
}

//set object of CountdownTimer class
var obCT = new CountdownTimer('obCT');
// ]]>
</script>
</font>
Salva il codice in HTML e vedi un po :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non solo se chiudi il browser ma basta un F5 e il timer si riavvia.
devi memorizzare il tempo da qualche parte :
1 se usi php pui utilizzare il database o un file di testo
2 solo con javascript puoi utilizzare i cookie o i local storage, però sono dati che si possono perdere con la pulizia della cache del browser
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
dovresti prima scegliere una delle 2 alternative, non è cmq un lavoro semplice.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
php è più sicuro, puoi iniziare con un file di testo per semplicità. Inizia leggendo la data da un file di testo già pronto e con il risutlato fai partire il timer, se hai problemi con php posta nella sezione di php.
un esempio per leggere il file.
PHP:
<?php
$file = "percorso file";
// apro il file in lettura
$fr = fopen($file, 'r');
// ciclo il contenuto
while (!feof($fr)) {
// estraggo la riga
    $riga = fgets($fr);
    // leggo e  stampo
    echo $riga . "<br />";
}
// chiudo
fclose($fr);
 
Discussioni simili
Autore Titolo Forum Risposte Data
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
E Form inserimento dati con JavaScript Javascript 0
franco69 [Javascript] dubbi metodi di inserimento codice inline Javascript 2
A inserimento javascript in pagina html Javascript 5
G inserimento file di testo in un file javascript Javascript 4
F Cursore di inserimento testo & javascript Javascript 4
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0

Discussioni simili