compte a rebours sur forum

[mike gino]

Bonjour à tous Noël arrive à grand pas j'aurai voulu mettre sur mon forum un compte à rebours du temps restant jusqu'à Noël mais je ne sais pas comment faire si quelqu'un sait et veut bien m'aider cela serait gentil.[/b]
Merci d'avance .
Ps car j'ai vu des sites ou on fait son propre compte à rebours titre couleur écriture etc ...après on obtient le code bbcode mais cela ne marche pas .https://musicnostalgie.forumactif.com/

[gigi68]

Salut mike gino,


Tu as loupé ceci
Astuce Forumactif

Cordialement
Gigi

[Adam_sfp]

Bonjour

Je ne trouve plus le post concernant un compte à rebours pour Noël mais j'ai gardé le code ;-)
https://jsfiddle.net/adam_sfp/uqfkmerL/4/embedded/result/



Si vous voulez le mettre en place
Mettez ceci dans gestion des codes javascript

Code:

$(document).ready(function() {
  $("body").after(' <div id="santa"></div><div id="countdown-container"> <div class="counter"><p class="days"><span id="number">\r\n </span> </p><p id="jours">JOURS</p></div><canvas id=\'snow\'></canvas></div></div>');
  var w = 250, h = 250, canvas = document.getElementById("snow"), ctx = canvas.getContext("2d"), rate = 70, arc = 300, time, count, size = 3, speed = 3, lights = new Array, colors = ["#fffff", "#bfd6f2", "#859cab"];
  canvas.setAttribute("width", w);
  canvas.setAttribute("height", h);
  function init() {
    time = 0;
    count = 0;
    for (var i = 0; i < arc; i++) {
      lights[i] = {x:Math.ceil(Math.random() * w), y:Math.ceil(Math.random() * h), toX:Math.random() * 5 + 1, toY:Math.random() * 5 + 1, c:colors[Math.floor(Math.random() * colors.length)], size:Math.random() * size};
    }
  }
  function bubble() {
    ctx.clearRect(0, 0, w, h);
    for (var i = 0; i < arc; i++) {
      var li = lights[i];
      ctx.beginPath();
      ctx.arc(li.x, li.y, li.size, 0, Math.PI * 2, false);
      ctx.fillStyle = li.c;
      ctx.fill();
      li.x = li.x + li.toX * (time * 0.05);
      li.y = li.y + li.toY * (time * 0.05);
      if (li.x > w) {
        li.x = 0;
      }
      if (li.y > h) {
        li.y = 0;
      }
      if (li.x < 0) {
        li.x = w;
      }
      if (li.y < 0) {
        li.y = h;
      }
    }
    if (time < speed) {
      time++;
    }
    timerID = setTimeout(bubble, 1000 / rate);
  }
  init();
  bubble();
  var daysTilXmas = function() {
    var today = new Date;
    var day = 24 * 60 * 60 * 1000;
    if (today.getMonth() === 11 && today.getDate() > 25) {
      var nextXmas = Date.parse(today.getFullYear() + 1 + "-12-25");
    } else {
      var nextXmas = Date.parse(today.getFullYear() + "-12-25");
    }
    var todayValue = Date.parse(today);
    if (nextXmas - todayValue > day) {
      var daysLeft = (nextXmas - todayValue) / day;
      document.querySelector("#number").innerHTML = Math.round(daysLeft);
    } else {
    }
  };
  daysTilXmas();
});

et ceci dans votre CSS

Code:

/*START Santa Countdown */
div#santa


{
  
  position: absolute;
  z-index: 10;
    top: 105px ;
    left:89px ;
  
  width: 26px;
  
  height: 26px;
 
  background-image: url(https://sd-1.archive-host.com/membres/up/37821634957680146/santa-claus.svg);
  background-repeat: no-repeat;
  
}


#countdown-container {
    position: absolute;
   z-index: 5;
    width: 80px;
    max-width: 80px;
    top: 80px;
    left: 30px;
}
#countdown {
    position: absolute;
}
.counter {
  
    margin: 10px 25px auto;
    position: absolute;
    color: rgba(75, 182, 244, 0.8);
}
#number {
    font-family: 'Arial Black', Gadget, sans-serif;
   margin:  ;
}
#jours {
   font-family: 'Arial ', Gadget, sans-serif;
    z-index: 59;
    margin: 5 ;
    
}
.counter p {
    margin: 0 ;
    font-weight: 500;
    font-size: 0.9em;
    color: rgba(75, 182, 244, 0.8);
    font-family: 'Arial Black', Gadget, sans-serif;
}
.counter p.days {
    font-size: 1.7em;
    font-weight: 70;
    color: rgba(255, 255, 255, 0.8);
}
canvas#snow {
    width: 100%;
    height: 100%;
    background: black;
    border-radius: 100%;
    border: 4px dotted #4bb6f4;
}


/*END Santa Countdown */

Cdt.

[mike gino]

Merci beaucoup peut-on svp le mettre via chrome?car impossible de le mettre en place malgré le code css dans feuille de style et le code js

[Adam_sfp]

Bonjour

J'ai enlevé les annotations dans le script essayez de remplacer par ce code javascript

Code:

$(document).ready(function() {
  $("body").after(' <div id="santa"></div><div id="countdown-container"> <div class="counter"><p class="days"><span id="number">\r\n </span> </p><p id="jours">JOURS</p></div><canvas id=\'snow\'></canvas></div></div>');
  var w = 250, h = 250, canvas = document.getElementById("snow"), ctx = canvas.getContext("2d"), rate = 70, arc = 300, time, count, size = 3, speed = 3, lights = new Array, colors = ["#fffff", "#bfd6f2", "#859cab"];
  canvas.setAttribute("width", w);
  canvas.setAttribute("height", h);
  function init() {
    time = 0;
    count = 0;
    for (var i = 0; i < arc; i++) {
      lights[i] = {x:Math.ceil(Math.random() * w), y:Math.ceil(Math.random() * h), toX:Math.random() * 5 + 1, toY:Math.random() * 5 + 1, c:colors[Math.floor(Math.random() * colors.length)], size:Math.random() * size};
    }
  }
  function bubble() {
    ctx.clearRect(0, 0, w, h);
    for (var i = 0; i < arc; i++) {
      var li = lights[i];
      ctx.beginPath();
      ctx.arc(li.x, li.y, li.size, 0, Math.PI * 2, false);
      ctx.fillStyle = li.c;
      ctx.fill();
      li.x = li.x + li.toX * (time * 0.05);
      li.y = li.y + li.toY * (time * 0.05);
      if (li.x > w) {
        li.x = 0;
      }
      if (li.y > h) {
        li.y = 0;
      }
      if (li.x < 0) {
        li.x = w;
      }
      if (li.y < 0) {
        li.y = h;
      }
    }
    if (time < speed) {
      time++;
    }
    timerID = setTimeout(bubble, 1000 / rate);
  }
  init();
  bubble();
  var daysTilXmas = function() {
    var today = new Date;
    var day = 24 * 60 * 60 * 1000;
    if (today.getMonth() === 11 && today.getDate() > 25) {
      var nextXmas = Date.parse(today.getFullYear() + 1 + "-12-25");
    } else {
      var nextXmas = Date.parse(today.getFullYear() + "-12-25");
    }
    var todayValue = Date.parse(today);
    if (nextXmas - todayValue > day) {
      var daysLeft = (nextXmas - todayValue) / day;
      document.querySelector("#number").innerHTML = Math.round(daysLeft);
    } else {
    }
  };
  daysTilXmas();
});

Cdt.

[mike gino]

Merci beaucoup ça marche youpiiiiiiiiiii bonne journée 

---

---

EDIT modération : balises "gras" supprimées, ceci est réservé à la modération