Bonjour, je suis un pu débutant en javascript,

Je suis actuellement en train de faire un "countdown timer" pour shopify avec des bouts de code trouvés sur internet.

Ce que j'aimerais, c'est pouvoir ajouté un 0 lorsque le nombre est inférieur à 10 (au lieu d'afficher par exemple "1 jour 1 heure 5 minutes 8 secondes", j'aimerais afficher "01 jour 01 heure 05 minutes 08 secondes), j'ai déjà trouvé plusieurs moyens de le faire mais je n'arrive pas à les intégrer à mon code.

Donc après des heures de recherches, je me tourne vers ce forum, voici mon code (juste le javascript) :

      <script>
        function getRandomizer(bottom, top) {
          return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
        }

        function setCookie(cname, cvalue, seconds) {
          var d = new Date();
          d.setTime(d.getTime() + (seconds * 1000));
          var expires = "expires="+d.toUTCString();
          document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function getCookie(cname) {
          var name = cname + "=";
          var ca = document.cookie.split(';');
          for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
          }
          return "";
        }

        var product_timer_top_text_enable = true;
        var product_progressbar_enable = true;
        {% if settings.active-bar %}var product_progressbar_enable = false {% endif %};
        if(!progressbar_message) var progressbar_message = "{{ settings.Offer}}";
        var percentage=80;
        var totalStock=50;
        var prevStock = 0;

        var rollDie = parseInt(getCookie("random_7963458115"));
        if(!rollDie) rollDie = getRandomizer(5,30);

        function showStock() {

          if(rollDie >= 6) rollDie = rollDie-(0.0005*(rollDie-4)*(rollDie-4));

          var intRollDie = parseInt(rollDie);

          if (prevStock != intRollDie) {

            setCookie("random_7963458115", intRollDie, 24*60*60);

            var html = '';
            if(product_timer_top_text_enable) html += '<p class="limited_edt"><span>'+ progressbar_message.replace('[num]', '<span class="num">'+intRollDie+'</span>') +'</span></p>';
            if(product_progressbar_enable) html += '<div class="meter red"><div class="inside" style="width: {{ settings.pourcentage }}%"></div></div>';
            $('.progressbar').html(html);
            if (prevStock > 0) {
              $('.progressbar span.num').addClass('flash');
              setTimeout(function () {
                $('.progressbar span.num').removeClass('flash');
              }, 1500);
            }
            prevStock = intRollDie;
          }
        }

        showStock();
        setInterval(showStock, 1000);

        var Days = parseInt("86400");
        var Days2 = parseInt("{{ settings.days }}");
                             var Hours = parseInt("3600");
        var Hours2 = parseInt("{{ settings.hours }}");
                              var Minutes = parseInt("60");
        var Minutes2 = parseInt("{{ settings.min }}");
                                var Seconds = parseInt("{{ settings.seconds }}");
                                var target_date = parseInt(getCookie("timer_7963458115")) || new Date().getTime()/1000 + Days * Days2 + Hours * Hours2 + Minutes * Minutes2 + Seconds;

        setCookie("timer_7963458115", target_date, 24*60*60);

        setInterval(function () {
          var days, hours, minutes, seconds;
          var current_time = new Date().getTime()/1000;
          var seconds_left = target_date - current_time;
          if(seconds_left <= 0){
            target_date = new Date().getTime()/1000 + Days * Days2 + Hours * Hours2 + Minutes * Minutes2 + Seconds;
            seconds_left = target_date - current_time;

            setCookie("timer_7963458115", target_date, 24*60*60);

          }
          days = parseInt(seconds_left / 86400);
          seconds_left = seconds_left % 86400;
          hours = parseInt(seconds_left / 3600);
          seconds_left = seconds_left % 3600;

          minutes = parseInt(seconds_left / 60);
          seconds = parseInt(seconds_left % 60);

          $('#countdown').html('<div class="counting">'+days+'<span>{{ settings.Jours }}</span></div><div class="counting">'+hours+'<span>{{ settings.Heures }}</span></div><div class="counting">'+minutes+'<span>{{ settings.Minutes }}</span></div><div class="counting">'+seconds+'<span>{{ settings.Secondes }}</span></div>');
                               }, 1000);

      </script>

Merci d'avance pour vos réponses

5 réponses


sheila
Réponse acceptée

Bonjour,

Il faut que tu fasse une condition sur les variables days, hours, minutes et seconds
Si ta variable est plus petite que 10 alors tu rajoute un 0 devant sinon tu l'affiche directement

Avec une simple fonction

function digit(number) {
    if (number < 10) {
        return '0' + number;    
    }
    return number;
}

et en modifiant

$('#countdown').html('<div class="counting">'+days+'<span>{{ settings.Jours }}</span></div><div class="counting">'+hours+'<span>{{ settings.Heures }}</span></div><div class="counting">'+minutes+'<span>{{ settings.Minutes }}</span></div><div class="counting">'+seconds+'<span>{{ settings.Secondes }}</span></div>');around                               }, 1000);

Par

$('#countdown').html('<div class="counting">'+digit(days)+'<span>{{ settings.Jours }}</span></div><div class="counting">'+digit(hours)+'<span>{{ settings.Heures }}</span></div><div class="counting">'+digit(minutes)+'<span>{{ settings.Minutes }}</span></div><div class="counting">'+digit(seconds)+'<span>{{ settings.Secondes }}</span></div>');
                               }, 1000);

Merci de ta réponse, cela m'aide beeaucoup ça marche désormais ! :)

Salut,
Plus généric :

String.prototype.lpad = function (width,z) {
  n=this.toString()
  z = z || '0';
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;  
}

exemple :

    var zz = 20;
    console.log(zz.lpad(10))
    ou 
    console.log(zz.lpad(10,'0'))

lpad pour left padding

@plus

Pierre

ou encore des methodes ES6 native padStart ou bien padEnd

@Defy , quand c'est tout fait, c'est encore mieux :D

@plus

Pierre