BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

 > Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS - Décompteur de jours
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Décompteur de jours
 Répondre Répondre Page  12>
Auteur
Message
  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
Serval62 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Sep 2015
Status: Inactif
Points: 18 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Serval62 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Décompteur de jours
    Envoyé : 03 Sep 2015 à 21:36
Bonjour à tous,

Je fais partie d'une asso organisant une course à pied annuelle. Pour des raisons que je ne citerai pas ici, j'ai été dans l'obligation de créer un nouveau site pour l'asso. J'ai quelques bonnes bases en informatique mais pas en programmation.

Je me suis donc lancé dans l'élaboration d'un site avec OE en partant d'une page blanche car aucun modèle ne me convenait. Je dois avouer que, vu mon niveau, je suis assez fier du résultat (merci les tutos du forum) même si je suis bien conscient qu'il y a encore du boulot.

Cependant, il y a un élément que je voudrai mettre en place mais que je ne trouve pas dans le forum : Je souhaiterai afficher un décompteur de temps. Je m'explique : Le départ de la prochaine course aura lieu le 26 juin 2016 à 09:00 et j'aimerai que le site indique que la course aura lieu dans MM mois, JJ jours, HH heures et mm minutes et que ce décompte soit affiché en temps réel par rapport au moment de consultation de la page. Ce compteur doit pouvoir être réinitialisé en entrant une nouvelle date (celle de la course de l'année suivante)

Je ne sais pas si j'ai été assez clair dans mes explications mais si oui et que quelqu'un a la solution, je suis preneur.
Après, il me restera à rendre le site "responsive" mais ça, c'est une autre histoire..... chaque chose en son temps.
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Sep 2015 à 22:55
copier coller dans un bloc de code visuel :



1ERE SOLUTION

<?php
$annee = date('Y');
$course = mktime(8, 0, 0, 06, 26, $annee);
       
 if ($course < time())
 $course = mktime(8, 0, 0, 06, 26, ++$annee);

 $tps_restant = $course - time();

//============ CONVERSIONS

$i_restantes = $tps_restant / 60;
$H_restantes = $i_restantes / 60;
$d_restants = $H_restantes / 24;


$s_restantes = floor($tps_restant % 60); // Secondes restantes
$i_restantes = floor($i_restantes % 60); // Minutes restantes
$H_restantes = floor($H_restantes % 24); // Heures restantes
$d_restants = floor($d_restants); // Jours restants
//==================

setlocale(LC_ALL, 'fr_FR');

echo 'Nous sommes le '. strftime('<strong>%d %B %Y</strong>, et il est <strong>%Hh%M</strong>') .'.<br />'

       . 'la prochaine course sera dans <strong>'. $d_restants .' jours</strong>, <strong>'. $H_restantes .' heures</strong>,'
   . ' <strong>'. $i_restantes .' minutes</strong> et <strong>'. $s_restantes .'s</strong>';

?>




2eme SOLUTION : juste le compte a rebours
<?php
$annee = date('Y');
$course = mktime(8, 0, 0, 06, 26, $annee);
       
 if ($course < time())
 $course = mktime(8, 0, 0, 06, 26, ++$annee);

 $tps_restant = $course - time();

//============ CONVERSIONS

$i_restantes = $tps_restant / 60;
$H_restantes = $i_restantes / 60;
$d_restants = $H_restantes / 24;


$s_restantes = floor($tps_restant % 60); // Secondes restantes
$i_restantes = floor($i_restantes % 60); // Minutes restantes
$H_restantes = floor($H_restantes % 24); // Heures restantes
$d_restants = floor($d_restants); // Jours restants
//==================

setlocale(LC_ALL, 'fr_FR');

echo 'la prochaine course sera dans <strong>'. $d_restants .' jours</strong>, <strong>'. $H_restantes .' heures</strong>,'
   . ' <strong>'. $i_restantes .' minutes</strong> et <strong>'. $s_restantes .'s</strong>';

?>


3eme SOLUTION : CODE JAVASCRIPT POUR UN COMPTEUR "DYNAMIQUE"
<div id="compte_a_rebours"><noscript>Fin de l'évènement le 26 juin 2016.</noscript></div>
<script type="text/javascript">
function compte_a_rebours()
{
    var compte_a_rebours = document.getElementById("compte_a_rebours");

    var date_actuelle = new Date();
    var date_evenement = new Date("Jun 26 00:00:00 2016");
    var total_secondes = (date_evenement - date_actuelle) / 1000;

    var prefixe = "Début de la course dans ";
    if (total_secondes < 0)
    {
        prefixe = "Première course commencée il y a "; // On modifie le préfixe si la différence est négatif

        total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue

    }

    if (total_secondes > 0)
    {
        var jours = Math.floor(total_secondes / (60 * 60 * 24));
        var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
        minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
        secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));

        var et = "et";
        var mot_jour = "jours,";
        var mot_heure = "heures,";
        var mot_minute = "minutes,";
        var mot_seconde = "secondes";

        if (jours == 0)
        {
            jours = '';
            mot_jour = '';
        }
        else if (jours == 1)
        {
            mot_jour = "jour,";
        }

        if (heures == 0)
        {
            heures = '';
            mot_heure = '';
        }
        else if (heures == 1)
        {
            mot_heure = "heure,";
        }

        if (minutes == 0)
        {
            minutes = '';
            mot_minute = '';
        }
        else if (minutes == 1)
        {
            mot_minute = "minute,";
        }

        if (secondes == 0)
        {
            secondes = '';
            mot_seconde = '';
            et = '';
        }
        else if (secondes == 1)
        {
            mot_seconde = "seconde";
        }

        if (minutes == 0 && heures == 0 && jours == 0)
        {
            et = "";
        }

        compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde;
    }
    else
    {
        compte_a_rebours.innerHTML = 'Début de la course dans.';
    }

    var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();
</script>



Edité par nico38 - 03 Sep 2015 à 23:26
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Serval62 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Sep 2015
Status: Inactif
Points: 18 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Serval62 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Sep 2015 à 23:26
Merci Nico38 pour la réponse mais comme je le disais, je suis une buse en programmation.
Je pense que sur le principe, le 2ème code correspond bien à ce que je cherchais mais j'aurai bien aimé quelque chose de plus intuitif (comme un nouveau bouton dans le menu d'OE qu'on pourrait cliquer glisser sur la page et où une fenêtre demanderai la date et l'heure de la prochaine course et le décompte se lancerai seul en fonction de la date du jour)
Mais bon, je sais, vous allez me répondre que vous auriez aimé (moi aussi) gagner à euromillion mais qu'on a pas toujours ce qu'on veut dans la vie Wink
Alors à défaut, est-ce qu'il serait possible de me détailler le code ci-dessus pour que je le comprenne et que je sache comment éventuellement l'adapter.
Merci d'avance


Edité par Serval62 - 03 Sep 2015 à 23:26
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Sep 2015 à 23:30
le code vert est dynamique et à la portée de n'importe qui. Un singe saurait le faire.
C'est pas de la programmation c'est juste de la lecture :

1. changer la date : Jun 26 00:00:00 2016"); : il y a mois, année et jour à modifier, j'ai mis pour le 26 juin 2016

2. changer le texte : var prefixe = "Début de la course dans ";

Edité par nico38 - 03 Sep 2015 à 23:31
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Serval62 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Sep 2015
Status: Inactif
Points: 18 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Serval62 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Sep 2015 à 23:35
Message posté par nico38 nico38 a écrit:

le code vert est dynamique et à la portée de n'importe qui. Un singe saurait le faire.


OK, donc demain matin je me rends au zoo pour demander des explications.LOL

Encore merci pour le coup de main, je vais enfin pouvoir ajouter cet élément qui me manquait.
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Sep 2015 à 23:44
1. glisser/deposer bloc de code Visuel
2. copier coller le code VERT
3. fin


exemple


Edité par nico38 - 04 Sep 2015 à 00:01
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Serval62 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Sep 2015
Status: Inactif
Points: 18 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Serval62 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Sep 2015 à 00:03
C'est bien ce que j'avais fait et ça fonctionne nickel.
Reste plus qu'à modifier la mise en page (police, couleur, etc...) et j'aurai exactement ce que je voulais.
Je teste demain matin.
Je posterai le lien vers le site dans la bonne rubrique dès sa mise en ligne (prévue la semaine prochaine) pour avoir les critiques me permettant de l'améliorer
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Sep 2015 à 00:10
ps : la mise en forme se fait comme n'importe quel autre élément par clic gauche c'est simple
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Sep 2015 à 13:21
désolé j'avais pas lu tout votre message, alors pour le détail :

1. prefixe = "Première course commencée il y a" :
le texte en rouge (modifiable) est celui qui apparaît après que l'évènement soit passé

2. var date_evenement = new Date("Jun 26 00:00:00 2016") :
Mois jour heure:minute:secondes année
(Les mois sont les 3premieres lettre des mois anglais : Jul, Jun....)

3. compte_a_rebours.innerHTML = "Début de la course dans.';
le texte en rouge est celui qui apparaît avant que l'évènement ne soit arrivé (à zéro). (Ne pas enlever le point)

Edité par nico38 - 04 Sep 2015 à 18:38
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Serval62 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 03 Sep 2015
Status: Inactif
Points: 18 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Serval62 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Sep 2015 à 12:34
Bonjour à tous.
Tout d'abord, je tiens à vous remercier pour votre aide aussi rapide qu'efficace.
L'hébergement de mon site ayant été validé, je me permet de donner le lien ( http://www.lacanadianrace.fr ) pour me donner d'éventuels points à améliorer.
A ce propos, j'ai un problème d'affichage sur téléphone portable avec des textes qui se chevauchent. J'aimerai que le site s'adapte à la résolution de l'affichage du navigateur (mode responsive si j'ai bien compris). Visiblement j'ai réussi avec le "fond d'écran" mais pas avec le reste.
J'ai bien trouvé ça http://www.commentcamarche.net/faq/4613-webmaster-adapter-un-site-a-toutes-les-resolutions mais je ne sais pas trop où insérer 
body{width:100%;}

Si Besoin, je peux poster le code source du basecalc
Après, il me restera le problème du livre d'or mais pour ça, j'ai déjà quelques pistes.
Merci d'avance de vos réponses


Edité par Serval62 - 13 Sep 2015 à 12:37
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.