[JAVA] Implémentation du compte à rebours Rails6

introduction

Implémentez le compte à rebours qui sera implémenté dans le portefeuille. Il existe un article qui indique que jQuery est nécessaire pour implémenter le minuteur, mais cette fois, nous allons procéder à l'implémentation sans utiliser jQuery.

Ordre de création

En tant que procédure spécifique ① Créez une colonne de date limite pour la limite de temps (2) Écrivez du HTML pour afficher la minuterie à l'écran. ③ Je veux afficher le délai, donc je l'écris en javascript.

Créer une colonne

D'abord, comme toujours

$les rails génèrent la migration Ajouter le nom de la colonne Au nom de la table Nom de la colonne: Type de données

Créez un fichier de migration avec.

Dans ce cas, je souhaite afficher la limite de temps dans la partie publication, j'ai donc utilisé la date limite comme nom de colonne.

$rails generate migration AddDeadlineToMission deadline:datetime

Et.

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

Ajoutez `` t.datetime: date limite '' à la 7ème ligne du fichier de migration ci-dessus. Et je l'ai vu du visage de mes parents

$ rails db:migrate

Pour enregistrer dans la base de données.

Mise en œuvre de la minuterie

Description HTML

Pour régler une minuterie de déficit comme celle ci-dessus

app/views/missions/new.html.erb

<p>
     <%= f.hidden_field :deadline, :id => "deadline.id" %>
        <input type="text" id="userYear" >Année
        <input type="text" id="userMonth">Mois
        <input type="text" id="userDate" >journée
        <input type="text" id="userHour" >Temps
        <input type="text" id="userMin"  >Minutes
        <input type="text" id="userSec"  >Secondes
 </p>
       <p id="RealtimeCountdownArea" ></p> #La minuterie est affichée ici

Et. Ici, : id => date-limite.id``` est décrit car il sera effectif dans la description de javascript plus tard.

Description Javascript

Cette fois, javascript sera décrit dans la balise de script de app / views / missions / new.html.erb.

C'est comme suit.

app/views/missions/new.html.erb

<script>
    
function set2fig(num) {
   //Si le nombre est à 1 chiffre, renvoyez-le sous forme de chaîne de caractères à 2 chiffres
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function isNumOrZero(num) {
   //S'il ne s'agit pas d'une valeur numérique, définissez-la sur 0 et renvoyez-la.
   if( isNaN(num) ) { return 0; }
   return num;
}
function showCountdown() {
   //Date et heure actuelles numériques(1970-01-01 00:00:Millimètres de 00)Conversion en
   var nowDate = new Date();
   var dnumNow = nowDate.getTime();
 
   //Valeur numérique pour la date et l'heure spécifiées(1970-01-01 00:00:Millimètres de 00)Conversion en
   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();
 
   //Préparez l'écran
   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 = "Date limite" + dlYear + "/" + dlMonth + "/" + dlDate + " " + set2fig(dlHour) + ":" + set2fig(dlMin) + ":" + set2fig(dlSec);
 
   //Nombre de jours après la soustraction(milliseconde)Calculez la différence entre
   var diff2Dates = dnumTarget - dnumNow;
   if( dnumTarget < dnumNow ) {
      //Si la date limite est passée-Multiplier par 1 pour convertir en valeur positive
      diff2Dates *= -1;
   }
 
   //Divisez la différence en millisecondes en jours, heures, minutes et secondes
   var dDays  = diff2Dates / ( 1000 * 60 * 60 * 24 );   //Journées
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 * 24 );
   var dHour  = diff2Dates / ( 1000 * 60 * 60 );   //temps
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 );
   var dMin   = diff2Dates / ( 1000 * 60 );   //Minutes
   diff2Dates = diff2Dates % ( 1000 * 60 );
   var dSec   = diff2Dates / 1000;   //Secondes
   var msg2 = Math.floor(dDays) + "journée"
            + Math.floor(dHour) + "temps"
            + Math.floor(dMin) + "Minutes"
            + Math.floor(dSec) + "Secondes";
 
   //Créer une chaîne d'affichage
   var msg;
   if( dnumTarget > dnumNow ) {
      //Si la date limite n'est pas encore arrivée
      msg = msg1 + "Jusqu'à ce que" + msg2 + "est.";
   }
   else {
      //Lorsque la date limite est passée
      msg = msg1 + "Déjà" + msg2 + "C'était passé avant.";
   }
 
   //Afficher la chaîne de caractères créée
   document.getElementById("RealtimeCountdownArea").innerHTML = msg;
   document.getElementById("deadline.id").value =  targetDate;　#Description la plus importante

}
//Courir chaque seconde
setInterval('showCountdown()',1000);


</script>

Ici, le précédent : id => date-limite.id``` entre en jeu. Seulement en ajoutant une telle description Vous pouvez recevoir le résultat traité par javascript sous forme de valeur et l'afficher à l'écran. Enfin, nous pouvons implémenter la minuterie.

Si vous souhaitez afficher uniquement la minuterie

Il est également possible que vous ne souhaitiez pas afficher le champ de saisie de la date et de l'heure. Si vous souhaitez afficher uniquement la date limite et le temps restant de la minuterie comme indiqué dans l'image ci-dessous,

app/views/missions/show.thml.erb

      <p>Date limite<%= @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) {
   //Si le nombre est à 1 chiffre, renvoyez-le sous forme de chaîne de caractères à 2 chiffres
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function isNumOrZero(num) {
   //S'il ne s'agit pas d'une valeur numérique, définissez-la sur 0 et renvoyez-la.
   if( isNaN(num) ) { return 0; }
   return num;
}
function showCountdown() {
   //Date et heure actuelles numériques(1970-01-01 00:00:Millimètres de 00)Conversion en
   var nowDate = new Date();
   var dnumNow = nowDate.getTime();
 
   //Valeur numérique pour la date et l'heure spécifiées(1970-01-01 00:00:Millimètres de 00)Conversion en
   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();
 
   //Préparez l'écran
   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 = "Date limite" + dlYear + "/" + dlMonth + "/" + dlDate + " " + set2fig(dlHour) + ":" + set2fig(dlMin) + ":" + set2fig(dlSec);
 
   //Nombre de jours après la soustraction(milliseconde)Calculez la différence entre
   var diff2Dates = dnumTarget - dnumNow;
   if( dnumTarget < dnumNow ) {
      //Si la date limite est passée-Multiplier par 1 pour convertir en valeur positive
      diff2Dates *= -1;
   }
 
   //Divisez la différence en millisecondes en jours, heures, minutes et secondes
   var dDays  = diff2Dates / ( 1000 * 60 * 60 * 24 );   //Journées
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 * 24 );
   var dHour  = diff2Dates / ( 1000 * 60 * 60 );   //temps
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 );
   var dMin   = diff2Dates / ( 1000 * 60 );   //Minutes
   diff2Dates = diff2Dates % ( 1000 * 60 );
   var dSec   = diff2Dates / 1000;   //Secondes
   var msg2 = Math.floor(dDays) + "journée"
            + Math.floor(dHour) + "temps"
            + Math.floor(dMin) + "Minutes"
            + Math.floor(dSec) + "Secondes";
 
   //Créer une chaîne d'affichage
   var msg;
   if( dnumTarget > dnumNow ) {
      //Si la date limite n'est pas encore arrivée
      msg =  "Jusqu'à la fin de la mission" + msg2 ;
   }
   else {
      //Lorsque la date limite est passée
      msg = msg1 + "Déjà" + msg2 + "C'était passé avant.";
   }
 
   //Afficher la chaîne de caractères créée
   document.getElementById("RealtimeCountdownArea").innerHTML = msg;
   document.getElementById("deadline.id").value =  targetDate;

}
//Courir chaque seconde
setInterval('showCountdown()',1000);

</script>

Si vous définissez ```input type = "hidden" `comme ci-dessus, le champ de saisie ne sera pas affiché à l'écran, mais les six` <input type = ・ ・ ・> `` seront supprimés. Cela ne signifie pas qu'il démarrera normalement.

De plus, <input type = "hidden" id = "userYear" value = "<% = @ mission.deadline.year%>"> ``

value="<%= @mission.deadline.year %>"Je vais expliquer pourquoi la partie de est une telle description. En effet, la date limite est une colonne qui prend un type de données appelé datetime, mais datetime stocke des informations de date et d'heure telles que l'année, le mois, le jour, l'heure, la minute et la seconde. Par conséquent, avec la description ci-dessus, nouveau.html.La date et l'heure de la date limite décrites dans la partie erb peuvent être récupérées.

# Résumé
 La difficulté était assez élevée, mais le sentiment d'accomplissement était incroyable. J'apprécierais que vous y fassiez référence autant que possible.

 Article de référence
https://www.nishishi.com/javascript-tips/realtime-countdown-deadline.html