Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

compte a rebours sur forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu compte a rebours sur forum

Message par mike gino le Lun 9 Déc 2019 - 14:40

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/


Dernière édition par mike gino le Mer 11 Déc 2019 - 13:13, édité 1 fois
mike gino

mike gino
**

Messages : 52
Inscrit(e) le : 31/08/2019

Voir le profil de l'utilisateur http://musicnostalgie.forumactif.com/forum
mike gino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: compte a rebours sur forum

Message par gigi68 le Mar 10 Déc 2019 - 20:20

Salut mike gino,


Tu as loupé ceci Smile
Astuce Forumactif

Cordialement
Gigi
gigi68

gigi68
****

Masculin
Messages : 242
Inscrit(e) le : 31/05/2014

Voir le profil de l'utilisateur http://motosudalsace.forumotion.com/forum
gigi68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: compte a rebours sur forum

Message par Adam_sfp le Mer 11 Déc 2019 - 9:34

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.


Dernière édition par Adam_sfp le Mer 11 Déc 2019 - 13:09, édité 2 fois (Raison : modification du code javascript)
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: compte a rebours sur forum

Message par mike gino le Mer 11 Déc 2019 - 12:20

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
mike gino

mike gino
**

Messages : 52
Inscrit(e) le : 31/08/2019

Voir le profil de l'utilisateur http://musicnostalgie.forumactif.com/forum
mike gino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: compte a rebours sur forum

Message par Adam_sfp le Mer 11 Déc 2019 - 13:01

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.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: compte a rebours sur forum

Message par mike gino le Mer 11 Déc 2019 - 13:13

Merci beaucoup ça marche youpiiiiiiiiiii bonne journée  cheers


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

mike gino
**

Messages : 52
Inscrit(e) le : 31/08/2019

Voir le profil de l'utilisateur http://musicnostalgie.forumactif.com/forum
mike gino a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum