Compte à rebours - Problème affichage sur iOS uniquement

Fermé
reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 - Modifié le 2 janv. 2020 à 11:15
 Utilisateur anonyme - 3 févr. 2020 à 19:41
Bonjour,

J'ai mis en place un petit compte à rebours en js sur une page d'accueil pour annoncer l'ouverture d'un site internet prochainement.

Le script que j'ai trouvé fonctionne parfaitement sur PC, Android, Mac mais j'ai un problème sur iOS (iPhone ... ).



Comme vous pouvez le voir sur la capture iOS, le js me balance des NaN à la place des chiffres, quelqu'un peut il me dire pourquoi et comment régler ça ?

Extrait code JS
 <script>
  
  countdownManager = {
      // Configuration
      targetTime: new Date('2020-01-04 20:00:00'), // Date cible du compte à rebours (00:00:00)
      displayElement: { // Elements HTML où sont affichés les informations
          day:  null,
          hour: null,
          min:  null,
          sec:  null
      },
       
      // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
      init: function(){
          // Récupération des références vers les éléments pour l'affichage
          // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
          this.displayElement.day  = jQuery('#countdown_day');
          this.displayElement.hour = jQuery('#countdown_hour');
          this.displayElement.min  = jQuery('#countdown_min');
          this.displayElement.sec  = jQuery('#countdown_sec');
           
          // Lancement du compte à rebours
          this.tick(); // Premier tick tout de suite
          window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
      },
       
      // Met à jour le compte à rebours (tic d'horloge)
      tick: function(){
          // Instant présent
          var timeNow  = new Date();
           
          // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
          if( timeNow > this.targetTime ){
              timeNow = this.targetTime;
          }
           
          // Calcul du temps restant
          var diff = this.dateDiff(timeNow, this.targetTime);
           
          this.displayElement.day.text(  diff.day  );
          this.displayElement.hour.text( diff.hour );
          this.displayElement.min.text(  diff.min  );
          this.displayElement.sec.text(  diff.sec  );
      },
       
      // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
      dateDiff: function(date1, date2){
          var diff = {}                           // Initialisation du retour
          var tmp = date2 - date1;
   
          tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
          diff.sec = tmp % 60;                    // Extraction du nombre de secondes
          tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
          diff.min = tmp % 60;                    // Extraction du nombre de minutes
          tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
          diff.hour = tmp % 24;                   // Extraction du nombre d'heures
          tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
          diff.day = tmp;
   
          return diff;
      }
  };
   
  jQuery(function($){
      // Lancement du compte à rebours au chargement de la page
      countdownManager.init();
  });

 </script>


Merci


EDIT : Ajout du LANGAGE dans les balises de code pour avoir la coloration syntaxique.

Configuration: Windows / Firefox 70.0


A voir également:

1 réponse

cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
1 févr. 2020 à 17:35
Bonjour,

pourquoi utilise-tu des null ? null est absence de tout valeur ...

Sinon au lieux de définir directement tes éléments de date depuis les éléments HTML passe-les dans la fonction parseInt()
0
Utilisateur anonyme
3 févr. 2020 à 19:41
ce n'est peut-être pas chic, mais ce n'est pas le problème, ils sont initalisés dans init(). Il s'agit sans doute d'un problème de compatibilité spécifique au navigateur - d'abord, lequel utilisez-vous sur iOS ? Safari ? Je verrais d'abord à vérifier la valeur de targetTime, peut-être le format de date n'est-il pas reconnu.
0