Compte à rebours - Problème affichage sur iOS uniquement

Signaler
Messages postés
78
Date d'inscription
lundi 11 juillet 2011
Statut
Membre
Dernière intervention
1 janvier 2020
-
Messages postés
9
Date d'inscription
dimanche 19 janvier 2020
Statut
Membre
Dernière intervention
18 février 2020
-
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


1 réponse

Messages postés
2097
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
15 octobre 2020
337
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()
Messages postés
9
Date d'inscription
dimanche 19 janvier 2020
Statut
Membre
Dernière intervention
18 février 2020
2
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.