Daily Countdown-Timer - Display-Nachricht um 21:57

Question

Ich bin schwer zu finden, wie Date() funktioniert, fand ich im Internet und wollte einen Countdown, der um 21:57 UTC Time endet. Es zeigt die Nachricht derzeit um 21:00 Uhr an und erscheint bis 22:00 Uhr.

Ich habe versucht, if(currenthours != 21 && currentminutes >= 57){ hinzuzufügen und brach es immer und erhielt die Nachricht. Ich möchte, dass es 3 Minuten vor 22:00 aufhört und die Nachricht anzeigt. Nach 22:00 Uhr starten Sie den Countdown für den nächsten Tag um 21:57 Uhr.

Jede Hilfe wird sehr geschätzt!

var date; 
 
var display = document.getElementById('time'); 
 

 
setInterval(function(){ 
 
    date = new Date(); 
 
    var currenthours = date.getUTCHours(); 
 
    // alert(currenthours); 
 
    var currentminutes = date.getUTCMinutes(); 
 
    // alert(currentminutes); 
 
    var hours; 
 
    var minutes; 
 
    var secondes; 
 
    
 
    if (currenthours != 21) { 
 

 
    if (currenthours < 21) { 
 
     hours = 20 - currenthours; 
 
    } else { 
 
     hours = 21 + (24 - currenthours); 
 
    } 
 
    minutes = 60 - date.getUTCMinutes(); 
 
    secondes = 60 - date.getUTCSeconds(); 
 
    display.innerHTML = ('00' + hours).slice(-2) + ' HOURS ' + '<p>' + 
 
         ('00' + minutes).slice(-2) + ' MINUTES ' + '</p>' + 
 
         ('00' + secondes).slice(-2) + ' SECONDS'; 
 
    } else { 
 
    display.innerHTML = "IT'S 21:57"; 
 
    } 
 
},1000);

<div id='time'></div>

eine Geige Hergestellt https://jsfiddle.net/5qrs0tcp/1/

Dies ist, was ich am Ende mit:

/* 
    |================================| 
    |   COUNTDOWN TIMER  | 
    |================================| 
    */ 

    // Return the UTC time component of a date in h:mm:ss.sss format 
    if (!Date.prototype.toISOTime) { 
     Date.prototype.toISOTime = function() { 
     return this.getUTCHours() + ':' + 
       ('0' + this.getUTCMinutes()).slice(-2) + ':' + 
       ('0' + this.getUTCSeconds()).slice(-2); 
     } 
    } 

    // Return the difference in time between two dates 
    // in h:mm:ss.sss format 
    if (!Date.prototype.timeDiff) { 
     Date.prototype.timeDiff = function(date2) { 
     var diff = Math.abs(this - date2); 
     return timeobj = { 
       hours : (diff/3.6e6|0),         // hours 
       minutes : ('0' + ((diff%3.6e6)/6e4|0)).slice(-2),   // minutes 
       seconds : ('0' + ((diff%6e4)/1e3|0)).slice(-2)    // seconds 
      } 
     } 
    } 

    function countDown() { 
     var now = new Date(); 
     var limitHr = 19; 
     var limitMin = 55; 
     var limitDate = new Date(+now); 
     // Set limitDate to next limit time 
     limitDate.setUTCHours(limitHr, limitMin, 0, 0); 

     // var msg = ['Currently: ' + now.toISOTime() + '<br>' + 'Limit: ' + limitDate.toISOTime()]; 
     var msg = []; 
     var diff; 

     // If outside limitHr:limitMin to (limitHr + 1):00 
     if (now.getUTCHours() == limitHr && now.getUTCMinutes() >= limitMin) { 
     msg.push('Countdown stopped'); 

     setTimeout(function(){ 
     msg = ['Wait for it']; 

     var jsonCounter = { 
      stats   : msg 
     } 

     jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3}); 
     },5000); 


     var jsonCounter = { 
      stats   : msg 
     } 

     jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3}); 

     } else { 

     if (now > limitDate) limitDate.setDate(limitDate.getDate() + 1); 

     var jsonCounter = { 
      hours  : now.timeDiff(limitDate).hours, 
      minutes : now.timeDiff(limitDate).minutes, 
      seconds : now.timeDiff(limitDate).seconds, 
      validating : msg 
     } 
     jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3}); 

     } 
    } 

    setInterval(countDown, 1000); 

    var daily_status; 
    setTimeout(function(){ 
    setInterval(function() { 
    jsonfile.readFile(DailyGamePath, (err, obj) => { 
     daily_status={ 
      hours: obj.hours, 
      minutes: obj.minutes, 
      seconds: obj.seconds, 
      stats: obj.stats, 
      validating: obj.validating 
     }; 
     return daily_status; 
     }); 
    }, 1000); 
    }, 3000); 

    setTimeout(function(){ 
    io.sockets.on('connection', (socket) => { 
     setInterval(function() { 
      // var GameStatus=DailyGameStatus(); 
      socket.broadcast.emit('stream', {hours:daily_status.hours, minutes:daily_status.minutes, seconds:daily_status.seconds, stats:daily_status.stats, validating:daily_status.validating}); 
     }, 1000); 
    }); 
    }, 3000); 

Answer 1

Date-Objekte sind sehr einfach, sie sind nur ein Zeitwert und einige handliche Methoden.

Ich denke, Ihre Logik muss nur sein:

if (currenthours != 21 && currentminutes < 57) { 
    // set the out of hours message 
} else { 
    // time is from 21:57 to 21:59 inclusive 
} 

Der Countdown funktioniert nicht ganz, weil Sie 00 nicht bis 57 zu zählen sind, aber ansonsten scheint es kein Problem zu sein.

var date; 
 
var display = document.getElementById('time'); 
 

 
setInterval(function(){ 
 
    date = new Date(); 
 
    var currenthours = date.getUTCHours(); 
 
    var currentminutes = date.getUTCMinutes(); 
 
    var hours; 
 
    var minutes; 
 
    var secondes; 
 
    var limitHr = 5; // Change these to required values 
 
    var limitMin = 02; // Using 5:12 for convenience 
 
    var message = 'Currently: ' + date.toISOString() + '<p>'; 
 

 
    // Create new message if outside limitHr:limitMin to limitHr:59 inclusive 
 
    if (currenthours != limitHr || currentminutes < limitMin) { 
 

 
    if (currenthours <= limitHr) { 
 
     hours = limitHr - currenthours; 
 
    } else { 
 
     hours = limitHr + (24 - currenthours); 
 
    } 
 
    
 
    minutes = limitMin - date.getUTCMinutes(); 
 
    minutes += minutes < 0? 60 : 0; 
 
    secondes = 60 - date.getUTCSeconds(); 
 
    message += ('00' + hours).slice(-2) + ' HOURS ' + '<p>' + 
 
       ('00' + minutes).slice(-2) + ' MINUTES ' + '</p>' + 
 
       ('00' + secondes).slice(-2) + ' SECONDS'; 
 
    } else { 
 
    message += 'It\'s on or after ' + limitHr + ':' + 
 
       ('0'+limitMin).slice(-2) + ' GMT'; 
 
    } 
 
    // Display the message 
 
    display.innerHTML = message; 
 
},1000);

<div id="time"></div>

Ja, hat der Timer Probleme, aber das war die Frage nicht Teil. Für einen Counter ist es einfacher, einfach in Zeitunterschieden zu arbeiten, daher habe ich einige Methoden hinzugefügt, um Date.prototype für ISO-Zeit (um mit ISO-Datum konsistent zu sein) und Zeitunterschied, dann diese Funktionen verwenden.

Die Funktion erstellt ein Datum für die Endzeit, sodass Berechnungen die Date-Methode verwenden können.

// Return the UTC time component of a date in h:mm:ss.sss format 
 
if (!Date.prototype.toISOTime) { 
 
    Date.prototype.toISOTime = function() { 
 
    return this.getUTCHours() + ':' + 
 
      ('0' + this.getUTCMinutes()).slice(-2) + ':' + 
 
      ('0' + this.getUTCSeconds()).slice(-2) + '.' + 
 
      ('00' + this.getUTCMilliseconds()).slice(-3) + 'Z'; 
 
    } 
 
} 
 

 
// Return the difference in time between two dates 
 
// in h:mm:ss.sss format 
 
if (!Date.prototype.timeDiff) { 
 
    Date.prototype.timeDiff = function(date2) { 
 
    var diff = Math.abs(this - date2); 
 
    var sign = this > date2? '+' : '-'; 
 
    return sign + (diff/3.6e6|0) + ':' +     // hours 
 
      ('0' + ((diff%3.6e6)/6e4|0)).slice(-2) + ':' + // minutes 
 
      ('0' + ((diff%6e4)/1e3|0)).slice(-2) + '.' + // seconds 
 
      ('00' + (diff%1e3)).slice(-3);     // milliseconds 
 
    } 
 
} 
 

 
function countDown() { 
 
    var now = new Date(); 
 
    var limitHr = 1; 
 
    var limitMin = 10; 
 
    var limitDate = new Date(+now); 
 
    // Set limitDate to next limit time 
 
    limitDate.setUTCHours(limitHr, limitMin, 0, 0); 
 
    var msg = ['Currently: ' + now.toISOTime() + '<br>' + 'Limit: ' + limitDate.toISOTime()]; 
 
    var diff; 
 

 
    // If outside limitHr:limitMin to (limitHr + 1):00 
 
    if (now.getUTCHours() != limitHr || now.getUTCMinutes() != limitMin) { 
 
    if (now > limitDate) limitDate.setDate(limitDate.getDate() + 1); 
 
    msg.push(now.timeDiff(limitDate)); 
 
    } else { 
 
    msg.push('It\'s after ' + limitHr + ':' + ('0'+limitMin).slice(-2)); 
 
    } 
 
    document.getElementById('msgDiv2').innerHTML = msg.join('<br>'); 
 
} 
 

 
window.onload = function() { 
 
setInterval(countDown, 1000); 
 
}

<div id="msgDiv2"></div>>

Ich habe die Millisekunden, rund um Sekunden nach links, wenn Sie es wünschen.

Ich habe den Timer mit setInterval verlassen, obwohl ich lieber setTimeout verwenden und manuell die Zeit bis kurz nach der nächsten vollen Sekunde, so dass es nie überspringt. Die meisten Browser, die setTimeout verwenden, werden langsam driften, so dass sie hin und wieder eine Sekunde überspringen. Nicht wirklich ein Problem, es sei denn, Sie sehen es zufällig oder vergleichen es mit dem Tick der Systemuhr.