[JAVA] Implementierung des Rails6-Countdown-Timers

Einführung

Implementieren Sie den Countdown-Timer, der im Portfolio implementiert wird. Es gibt einen Artikel, der besagt, dass jQuery erforderlich ist, um den Timer zu implementieren. Dieses Mal werden wir jedoch mit der Implementierung fortfahren, ohne jQuery zu verwenden.

Erstellungsreihenfolge

Als spezifisches Verfahren ① Erstellen Sie eine Fristspalte für das Zeitlimit (2) Schreiben Sie HTML, um den Timer auf dem Bildschirm anzuzeigen. ③ Ich möchte das Zeitlimit anzeigen, also schreibe ich es mit Javascript.

Eine Spalte erstellen

Erstens wie immer

$Schienen generieren Migration Spaltenname zum Tabellennamen hinzufügen Spaltenname: Datentyp

Erstellen Sie eine Migrationsdatei mit.

In diesem Fall möchte ich das Zeitlimit im Buchungsteil anzeigen, daher habe ich die Frist als Spaltennamen verwendet.

$rails generate migration AddDeadlineToMission deadline:datetime

Und.

db/migrate/20200903084112_create_missions.rb

class CreateMissions < ActiveRecord::Migration[6.0]
  def change
    create_table :missions do |t|
      t.integer :user_id
      t.text    :content
      t.string  :penalty
      t.datetime   :deadline

      
      t.timestamps
    end
  end
end

Fügen Sie in der 7. Zeile der obigen Migrationsdatei `` `t.datetime: Deadline``` hinzu. Und ich sah es aus dem Gesicht meiner Eltern

$ rails db:migrate

In der Datenbank speichern.

Implementierung des Timers

HTML-Beschreibung

Einstellen eines Defizit-Timers wie oben

app/views/missions/new.html.erb

<p>
     <%= f.hidden_field :deadline, :id => "deadline.id" %>
        <input type="text" id="userYear" >Jahr
        <input type="text" id="userMonth">Mond
        <input type="text" id="userDate" >Tag
        <input type="text" id="userHour" >Zeit
        <input type="text" id="userMin"  >Protokoll
        <input type="text" id="userSec"  >Sekunden
 </p>
       <p id="RealtimeCountdownArea" ></p> #Der Timer wird hier angezeigt

Und. Hier wird `` `: id => Deadline.id``` beschrieben, da es später in der Beschreibung von Javascript wirksam wird.

Javascript Beschreibung

Dieses Mal wird Javascript im Skript-Tag von `` `app / views / missions / new.html.erb``` beschrieben.

Es ist wie folgt.

app/views/missions/new.html.erb

<script>
    
function set2fig(num) {
   //Wenn die Zahl 1-stellig ist, geben Sie sie als 2-stellige Zeichenfolge zurück
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function isNumOrZero(num) {
   //Wenn es sich nicht um einen numerischen Wert handelt, setzen Sie ihn auf 0 und geben Sie ihn zurück.
   if( isNaN(num) ) { return 0; }
   return num;
}
function showCountdown() {
   //Numerisches aktuelles Datum und Uhrzeit(1970-01-01 00:00:Millimeter von 00)Umstellung auf
   var nowDate = new Date();
   var dnumNow = nowDate.getTime();
 
   //Numerischer Wert für das angegebene Datum und die angegebene Uhrzeit(1970-01-01 00:00:Millimeter von 00)Umstellung auf
   var inputYear  = document.getElementById("userYear").value;
   var inputMonth = document.getElementById("userMonth").value - 1;
   var inputDate  = document.getElementById("userDate").value;
   var inputHour  = document.getElementById("userHour").value;
   var inputMin   = document.getElementById("userMin").value;
   var inputSec   = document.getElementById("userSec").value;
   var targetDate = new Date( isNumOrZero(inputYear), isNumOrZero(inputMonth), isNumOrZero(inputDate), isNumOrZero(inputHour), isNumOrZero(inputMin), isNumOrZero(inputSec) );
   var dnumTarget = targetDate.getTime();
 
   //Bereiten Sie die Anzeige vor
   var dlYear  = targetDate.getFullYear();
   var dlMonth = targetDate.getMonth() + 1;
   var dlDate  = targetDate.getDate();
   var dlHour  = targetDate.getHours();
   var dlMin   = targetDate.getMinutes();
   var dlSec   = targetDate.getSeconds();
   var msg1 = "Frist" + dlYear + "/" + dlMonth + "/" + dlDate + " " + set2fig(dlHour) + ":" + set2fig(dlMin) + ":" + set2fig(dlSec);
 
   //Anzahl der Tage nach Subtraktion(Millisekunde)Berechnen Sie die Differenz zwischen
   var diff2Dates = dnumTarget - dnumNow;
   if( dnumTarget < dnumNow ) {
      //Wenn die Frist abgelaufen ist-Mit 1 multiplizieren, um einen positiven Wert zu erhalten
      diff2Dates *= -1;
   }
 
   //Teilen Sie die Differenz Millisekunde in Tage, Stunden, Minuten und Sekunden
   var dDays  = diff2Dates / ( 1000 * 60 * 60 * 24 );   //Tage
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 * 24 );
   var dHour  = diff2Dates / ( 1000 * 60 * 60 );   //Zeit
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 );
   var dMin   = diff2Dates / ( 1000 * 60 );   //Protokoll
   diff2Dates = diff2Dates % ( 1000 * 60 );
   var dSec   = diff2Dates / 1000;   //Sekunden
   var msg2 = Math.floor(dDays) + "Tag"
            + Math.floor(dHour) + "Zeit"
            + Math.floor(dMin) + "Protokoll"
            + Math.floor(dSec) + "Sekunden";
 
   //Erstellen einer Anzeigezeichenfolge
   var msg;
   if( dnumTarget > dnumNow ) {
      //Wenn die Frist noch nicht gekommen ist
      msg = msg1 + "Bis" + msg2 + "ist.";
   }
   else {
      //Wenn die Frist abgelaufen ist
      msg = msg1 + "Bereits" + msg2 + "Es ging vorher vorbei.";
   }
 
   //Zeigen Sie die erstellte Zeichenfolge an
   document.getElementById("RealtimeCountdownArea").innerHTML = msg;
   document.getElementById("deadline.id").value =  targetDate;　#Wichtigste Beschreibung

}
//Laufen Sie jede Sekunde
setInterval('showCountdown()',1000);


</script>

Hier kommt die vorherige `` `: id => Deadline.id``` ins Spiel. Nur durch Hinzufügen einer solchen Beschreibung Sie können das von Javascript verarbeitete Ergebnis als Wert empfangen und auf dem Bildschirm anzeigen. Schließlich können wir den Timer implementieren.

Wenn Sie nur den Timer anzeigen möchten

Es ist auch möglich, dass Sie das Eingabefeld für Datum und Uhrzeit nicht anzeigen möchten. Wenn Sie nur die Frist und die verbleibende Zeit des Timers anzeigen möchten, wie in der folgenden Abbildung gezeigt,

app/views/missions/show.thml.erb

      <p>Frist<%= @mission.deadline %>
      <br>
        <input type="hidden" id="userYear" value = "<%= @mission.deadline.year %>"  > 
        <input type="hidden" id="userMonth"value = "<%= @mission.deadline.month %>" >
        <input type="hidden" id="userDate" value = "<%= @mission.deadline.day %>" >
        <input type="hidden" id="userHour" value = "<%= @mission.deadline.hour %>" >
        <input type="hidden" id="userMin"  value = "<%= @mission.deadline.min %>" >
        <input type="hidden" id="userSec"  value = "<%= @mission.deadline.sec %>" >
      </p>
      <p id="RealtimeCountdownArea" ></p>

<script>



function set2fig(num) {
   //Wenn die Zahl 1-stellig ist, geben Sie sie als 2-stellige Zeichenfolge zurück
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function isNumOrZero(num) {
   //Wenn es sich nicht um einen numerischen Wert handelt, setzen Sie ihn auf 0 und geben Sie ihn zurück.
   if( isNaN(num) ) { return 0; }
   return num;
}
function showCountdown() {
   //Numerisches aktuelles Datum und Uhrzeit(1970-01-01 00:00:Millimeter von 00)Umstellung auf
   var nowDate = new Date();
   var dnumNow = nowDate.getTime();
 
   //Numerischer Wert für das angegebene Datum und die angegebene Uhrzeit(1970-01-01 00:00:Millimeter von 00)Umstellung auf
   var inputYear  = document.getElementById("userYear").value;
   var inputMonth = document.getElementById("userMonth").value - 1;
   var inputDate  = document.getElementById("userDate").value;
   var inputHour  = document.getElementById("userHour").value;
   var inputMin   = document.getElementById("userMin").value;
   var inputSec   = document.getElementById("userSec").value;
   var targetDate = new Date( isNumOrZero(inputYear), isNumOrZero(inputMonth), isNumOrZero(inputDate), isNumOrZero(inputHour), isNumOrZero(inputMin), isNumOrZero(inputSec) );
   var dnumTarget = targetDate.getTime();
 
   //Bereiten Sie die Anzeige vor
   var dlYear  = targetDate.getFullYear();
   var dlMonth = targetDate.getMonth() + 1;
   var dlDate  = targetDate.getDate();
   var dlHour  = targetDate.getHours();
   var dlMin   = targetDate.getMinutes();
   var dlSec   = targetDate.getSeconds();
   var msg1 = "Frist" + dlYear + "/" + dlMonth + "/" + dlDate + " " + set2fig(dlHour) + ":" + set2fig(dlMin) + ":" + set2fig(dlSec);
 
   //Anzahl der Tage nach Subtraktion(Millisekunde)Berechnen Sie die Differenz zwischen
   var diff2Dates = dnumTarget - dnumNow;
   if( dnumTarget < dnumNow ) {
      //Wenn die Frist abgelaufen ist-Mit 1 multiplizieren, um einen positiven Wert zu erhalten
      diff2Dates *= -1;
   }
 
   //Teilen Sie die Differenz Millisekunde in Tage, Stunden, Minuten und Sekunden
   var dDays  = diff2Dates / ( 1000 * 60 * 60 * 24 );   //Tage
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 * 24 );
   var dHour  = diff2Dates / ( 1000 * 60 * 60 );   //Zeit
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 );
   var dMin   = diff2Dates / ( 1000 * 60 );   //Protokoll
   diff2Dates = diff2Dates % ( 1000 * 60 );
   var dSec   = diff2Dates / 1000;   //Sekunden
   var msg2 = Math.floor(dDays) + "Tag"
            + Math.floor(dHour) + "Zeit"
            + Math.floor(dMin) + "Protokoll"
            + Math.floor(dSec) + "Sekunden";
 
   //Erstellen einer Anzeigezeichenfolge
   var msg;
   if( dnumTarget > dnumNow ) {
      //Wenn die Frist noch nicht gekommen ist
      msg =  "Bis zum Ende der Mission" + msg2 ;
   }
   else {
      //Wenn die Frist abgelaufen ist
      msg = msg1 + "Bereits" + msg2 + "Es ging vorher vorbei.";
   }
 
   //Zeigen Sie die erstellte Zeichenfolge an
   document.getElementById("RealtimeCountdownArea").innerHTML = msg;
   document.getElementById("deadline.id").value =  targetDate;

}
//Laufen Sie jede Sekunde
setInterval('showCountdown()',1000);

</script>

Wenn Sie `input type =" hidden "` wie oben festlegen, wird das Eingabefeld nicht auf dem Bildschirm angezeigt, aber die sechs Elemente `<input type = ・ ・ ・>` werden gelöscht. Dies bedeutet nicht, dass es normal startet.

Außerdem <input type = "hidden" id = "userYear" value = "<% = @ mission.deadline.year%>"> `

value="<%= @mission.deadline.year %>"Ich werde erklären, warum der Teil von eine solche Beschreibung ist. Dies liegt daran, dass Deadline eine Spalte ist, die einen Datentyp namens datetime verwendet, datetime jedoch Datums- und Zeitinformationen wie Jahr, Monat, Tag, Stunde, Minute und Sekunde speichert. Daher mit der obigen Beschreibung neu.html.Das Datum und die Uhrzeit der im erb-Teil beschriebenen Frist können abgerufen werden.

# Zusammenfassung
 Die Schwierigkeit war ziemlich hoch, aber das Erfolgserlebnis war erstaunlich. Ich würde es begrüßen, wenn Sie so viel wie möglich darauf verweisen könnten.

 Referenzartikel
https://www.nishishi.com/javascript-tips/realtime-countdown-deadline.html