[BESTOF] [PHPBB3]Compte à rebours hebdomadaire permanent

Coucou Serge,
hum, c'est un script d'Arnaud et franchement , je ne pourrais pas te renseigner sur ce point car tout cela est du Jargon pour moi .

En espérant que notre ami @no_way (Arnaud) passe dans le coin
pour te donner une réponse,il est assez prit concernant sa vie privée
donc soit patient Serge.

Hello Philippe,

Ah bon, le monde est petit; je n'avais pas vu qu'il était d'Arnaud.

Sujet qui n'a aucune urgence.
Si Arnaud est indisponible, peut-être clôturer le sujet Phil.
A vous de voir.

Re-Phil,

Pourrais-tu par contre pour l'instant, m'indiquer comment placer cette horloge en l'état en haut de page d'accueil et du portage.
Son code:

Code:

<span id="id_horloge"></span>

Merci pour ton aide.

Dans les templates concernés Serge .
Index_body et portal_body

Je teste un script trouvé sur le net mais il faut agir dessus chaque semaine :

http://www.supportduweb.com/post-282-compte-a-rebour.html

Voir ce que cela donne sur mon fofo de test:
https://testphpbb3.1fr1.net/

Si cela te convient Serge, est ce que les caractères sont trop petits?

Je reviens plus tard .

Pétard, je ne pense jamais aux templates....

Ah, bin en attendant, je vais effectivement mettre un compte à rebours avec intervention chaque semaine.

Oui, Phil, ce que tu me proposes me convient.

Non les caractères ne sont pas trop petits, je cherche quelque chose de sobre et discret.
Voire même sans les carrés, ou bien avec les chiffres centrés dans les carrés si c'est possible.

Je reviens plus tard aussi

Voilà , c'est plus sobre comme ceci:
https://testphpbb3.1fr1.net/



Alors dans chaque template concerné:

Supprimes le code htl que tu as déposé et ajoutes ceci:

Code:

<div id="Compte">
</div><script type="text/javascript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Dec 09 00:00:00 2019");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>jour(s)</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>heure(s)</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>minute(s)</div><div class=nume><span> "+ sec + " </span></div><div class=alpha>seconde(s)</div>";
window.status = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script>

Puis la css que tu pourras modifier selon le placement dans chacun des 2 templates:

Code:


/*LE CONTENEUR*/

#Compte
{
background:#2e2e2e;
height: 60px;
padding: 10px;
width: 40%;
position: fixed;
left: 0;
top: 50px;
}
#Compte div{float:left;margin:0px 5px;line-height: 60px;color:#3bd9eb;  }
#Compte div span
{
font-size:12px;
text-align:center;
color:#e2660a;
}


Explication sur le décompte:

Ici:

Code:

var date2 = new Date ("Dec 09 00:00:00 2019");

Dec correspond à Décembre
09 le jour ou le décompte se terminera
00:00:00 , ne touche à rien car tu mentionnes que le vote démarre à minuit et se termine à minuit.
Puis l'année, donc pas besoin de t'expliquer je suppose(bon à la fin de ce mois, il faudra modifier vers 2020.

Tu peux changer le texte "Temps restant pour voter" ici:

Code:

<div class=titre>Temps restant pour voter: </div>

Re Phil,

Merci beaucoup. ça correspond visuellement à ce que j'avais en tête et c'est en place

Par contre, ce serait bien d'avoir une astuce pour ne pas avoir à faire la modification de date dans les templates car ce serait à un modérateur de faire cela et il n'aura donc pas accès aux templates.  

Hum, tiens donc, je me suis bien douté, mais mon message était envoyé .

Bref,
laisses le code html dans les 2 templates :

Code:

<div id="Compte">
</div>

et supprimes le script:

Code:

<script type="text/javascript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Dec 09 00:00:00 2019");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>jour(s)</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>heure(s)</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>minute(s)</div><div class=nume><span> "+ sec + " </span></div><div class=alpha>seconde(s)</div>";
window.status = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script>

Ensuite créer un script en cochant sur l'index et le portail et déposes ceci:

Code:

$(function(){

var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Dec 09 00:00:00 2019");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>jour(s)</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>heure(s)</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>minute(s)</div><div class=nume><span> "+ sec + " </span></div><div class=alpha>seconde(s)</div>";
window.status = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
  
});

Et voilou .

Par contre, ce serait bien d'avoir une astuce pour ne pas avoir à faire la modification de date dans les templates car ce serait à un modérateur de faire cela et il n'aura donc pas accès aux templates.

Hum les modérateurs non pas accès à la gestion des scripts!!!!!!

Merci Philippe pour ton suivi.

En effet Philippe, les Modérateurs n'ont pas accès aux scripts à cause de mauvaises surprises il y a un moment.

Seuls les administrateurs y ont accès et je suis le seul à "savoir" intervenir dans un script."

De rien Serge,
hum, ils n'ont jamais eut accès à la gestion seul les admins peuvent y accéder.

car ce serait à un modérateur de faire cela et il n'aura donc pas accès aux templates.

Dans ce cas présent, c'est toi qui devra le faire alors ?

Bin oui, et j'en fait déjà pas mal :-)

C'est pour cela que j'étais parti sur une horloge perpétuelle démarrant à 7 jours 00:00:00 le mardi à minuit et arriverait à 0 jour 00:00:00 le lundi à minuit de façon permanente.

J'en doute pas Serge,
ensuite trouver une astuce qui va donner un accès aux modos pour donner une information dans les templates, c'est purement impossible Serge ..

Dans ce cas Phil, je laisse ainsi en attendant peut-être le passage d' Arnaud.

Et pour donner une information au JS, via un bouton par exemple pour renseigner la date, c'est impossible aussi Philippe?

Dans ce cas Phil, je laisse ainsi en attendant peut-être le passage d' Arnaud.

C'est préférable ainsi Serge.

Et pour donner une information au JS, via un bouton par exemple pour renseigner la date, c'est impossible aussi Philippe?

Le J.S étant dans une partie visible que par les admins,
rien ne pourra être fonctionnel Serge...

OK, Philippe je laisse ainsi.

Tu me diras si je passe en résolu ou si on attend un peu.

Dans tous les cas merci pour tout Phil.

On va laisser ton sujet ouvert le temps que notre ami Arnaud trouve un peu
de son temps libre pour te concocter le script adéquate  

OK. Merci.
Bonne soirée Phil.

Je viens d'essayer en mettant le script dans un JS et non pas dans le template, le décompte ne se fait plus de façon continue, mais à chaque rafraichissement de la page

Bonjour Philippe,

Désolé pour le triple post.

Je crois avoir trouvé mon bonheur sur le net avec ce script que j'ai adapté à mon besoin pour rendre le décompte permanent:

Code:


<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script>
    'use strict';
    
    const countdown = ( id = "#countdown", interval = 1, seconds = 0, minutes = 0, hours = 0, days = 7, months = 0, years = 0 ) => {
      const
        ctx = new AudioContext(),
        note = ( frequency = 277.18, duration = 1.0, type = "sine"  ) => {
          let
            osc = ctx.createOscillator(),
            gainNode = ctx.createGain();
      
          osc.type = type;
          osc.connect( gainNode );
          osc.frequency.value = frequency;
          gainNode.connect( ctx.destination );
          osc.start( 0 );
          gainNode.gain.exponentialRampToValueAtTime( 0.00001, ctx.currentTime + duration );
          return Promise.resolve( "note" );
        };
        
      let
        timer = document.querySelector( id ),
        duration = moment.duration({
          "seconds" : seconds,
          "minutes" : minutes,
          "hours" : hours,
          "days" :days,
          "months" : months,
          "years" : years
        }),
        ObjInterval = setInterval( () => {
          duration.subtract( interval, "seconds" );
          
          if ( duration.asMilliseconds() > -1 ){
            
            timer.value = "temps restant pour voter: " +
    //duration.get( "years" ) + " an(s), "  +
    //duration.get( "months" ) + " mois, " +
              duration.get( "days" ) + " j, " +
              duration.get( "hours" ) + " h, " +
              duration.get( "minutes" ) + " mn, " +
              duration.get( "seconds" ) + " sec";
              
          } else {
            
            clearInterval( ObjInterval );
    
    // à zéro, on réinitialise le compteur universel  
   countdown( "#countdown", 1, 0, 0 ,0 , 7 );          
            
            note( 261.63, 2.0 ).catch( er => { console.error( er ) } );
            
          }
        }, interval * 1000 );
    };
    
    document.addEventListener( 'DOMContentLoaded', ev => {
                  
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      // id, intervalle en secondes, secondes, minutes, heures, jours, mois, ans
      // ci-dessous : une minute 7 jours 0 heures 0 minutes et 0 secondes avec un intervalle d'une seconde
      countdown( "#countdown", 1, 0, 0 ,0 , 7 );
      
    }, false );
    
  </script>
</head>
<body>
  <main>
 
    <output id="countdown"></output>
 
  </main>
</body>
</html>



Pourrais-tu m'aider pour avoir le même rendu que ton script (qui est en place sur ma page d'accueil via le template), et m'indiquer comment l'implanter sur mon forum.

merci pour ton aide.

Hello Serge,
le script n'est pas fonctionnel sur une page html  

Pour l'autre script, ce seul script s'affichera sur le portail et l'index:

Code:

$(function(){
  var index=$('a[href="/search?search_id=activetopics"]').length;
  var portail=$('table[class="portal"]').length;
  if((index)||(portail))
  {
$('body').append('<div id="Compte"><script>var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Dec 09 00:00:00 2019");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>jour(s)</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>heure(s)</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>minute(s)</div><div class=nume><span> "+ sec + " </span></div><div class=alpha>seconde(s)</div>";
window.status = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();</script></div>');
  }
  });


La c.s.s associée:

Code:

/*LE CONTENEUR*/
#Compte
{
background:#2e2e2e;
height: 60px;
padding: 10px;
width: 40%;
position: fixed;
left: 0;
top: 50px;
}
#Compte div {float:left;margin:0px 5px;line-height: 60px;color:#3bd9eb;  }
/*LES CHIFFRES*/
#Compte div span
{
font-size:12px;
text-align:center;
color:#e2660a;
}


Hello Phil.

Je te remets en copier coller le code de ma page html et qui fonctionne.

Code:


   <meta content="public, max-age=60" http-equiv="cache-control" />  <meta charset="utf-8" />  <meta content="width=device-width, initial-scale=1" name="viewport" />  <meta content="Daniel Hagnoul" name="author" />  <title>Test</title>  <style>
 
  </style>  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>  <script>
    'use strict';
    
    const countdown = ( id = "#countdown", interval = 1, seconds = 0, minutes = 0, hours = 0, days = 7, months = 0, years = 0 ) => {
      const
        ctx = new AudioContext(),
        note = ( frequency = 277.18, duration = 1.0, type = "sine"  ) => {
          let
            osc = ctx.createOscillator(),
            gainNode = ctx.createGain();
      
          osc.type = type;
          osc.connect( gainNode );
          osc.frequency.value = frequency;
          gainNode.connect( ctx.destination );
          osc.start( 0 );
          gainNode.gain.exponentialRampToValueAtTime( 0.00001, ctx.currentTime + duration );
          return Promise.resolve( "note" );
        };
        
      let
        timer = document.querySelector( id ),
        duration = moment.duration({
          "seconds" : seconds,
          "minutes" : minutes,
          "hours" : hours,
          "days" :days,
          "months" : months,
          "years" : years
        }),
        ObjInterval = setInterval( () => {
          duration.subtract( interval, "seconds" );
          
          if ( duration.asMilliseconds() > -1 ){
            
            timer.value = "temps restant pour voter: " +
    //duration.get( "years" ) + " an(s), "  +
    //duration.get( "months" ) + " mois, " +
              duration.get( "days" ) + " j, " +
              duration.get( "hours" ) + " h, " +
              duration.get( "minutes" ) + " mn, " +
              duration.get( "seconds" ) + " sec";
              
          } else {
            
            clearInterval( ObjInterval );
    
    // à zéro, on réinitialise le compteur universel  
   countdown( "#countdown", 1, 0, 0 ,0 , 7 );          
            
            note( 261.63, 2.0 ).catch( er => { console.error( er ) } );
            
          }
        }, interval * 1000 );
    };
    
    document.addEventListener( 'DOMContentLoaded', ev => {
                  
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      // id, intervalle en secondes, secondes, minutes, heures, jours, mois, ans
      // ci-dessous : une minute 7 jours 0 heures 0 minutes et 0 secondes avec un intervalle d'une seconde
      countdown( "#countdown", 1, 0, 0 ,0 , 7 );
      
    }, false );
    
  </script>   <main>      <output id="countdown"></output>    </main>

Ok merci,
j'ai édité mon message :
https://www.milouze14.com/t32386-phpbb3-compte-a-rebours-hebdomadaire-permanent#616450

Je regarde pour l'autre script, mais à priori il ne rien de plus Serge

Je vais essayé ton denier code.

Le code html proposé fonctionne sans que je sois obligé de remettre la date chaque semaine phil.

Je remets le compteur à 7 jours ici:

Code:


          } else {
           
            clearInterval( ObjInterval );
   
    // à zéro, on réinitialise le compteur universel 
  countdown( "#countdown", 1, 0, 0 ,0 , 7 );