Horloge/compte à rebours sans personnalisation

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

  • 0

Tutoriel Horloge/compte à rebours sans personnalisation

Message par no_way Lun 15 Juin 2015 - 14:55

Horloge et / ou compte à rebours (sans personnalisation)

Cette astuce vous permet de créer une horloge et / ou un compte à rebours.

Voir illustration :

Création du script général


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "[Script général] Horloge et /ou compte à rebours" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
var horloge = function(cible, options) {
    try {
        if (!cible.length || !(cible.tagName || (cible instanceof jQuery && cible[0].tagName))) throw 'cible ne représente pas un élément';
        this.cible = cible;
        this.options = options || this.optionsParDefaut();
    } catch (e) {
        console.log(e)
    }
};
horloge.prototype = {
    /*récupération de l'heure*/
    heure: function() {
        try {
            var d = new Date(),
                date = [],
                i, h, m, s, r = this,
                t, u, v = this.options.f_H;
            h = d.getHours();
            m = d.getMinutes();
            s = d.getSeconds();
            date["h"] = h < 10 ? "0" + h : "" + h;
            date["m"] = m < 10 ? "0" + m : "" + m;
            date["s"] = s < 10 ? "0" + s : "" + s;
            for (i in date) {
                for (t = 0; t < date[i].length; t++) {
                    date[i + (t + 1)] = date[i][t];
                }
            }
            /*Actions*/
            t = v.match(/\{[jhms][0-9]?\}/g);
            for (i in t) {
                v = v.replace(t[i], (u = date[t[i].slice(1, -1)]) ? u : "mode " + t[i] + " inconnu")
            }
            this.cible instanceof jQuery ? this.cible.html(v) : this.cible.innerHTML = v;
            /**/
            setTimeout(this.heure.bind(this), 1000)
        } catch (e) {
            console.log(e)
        }
    },
    /*mode a rebours*/
    a_rebours: function(date_cible) {
        try {
            var d = new Date(),
                date = [],
                dc = date_cible,
                dfs, i, j, h, m, s, r = this,
                t, u, v = this.options.f_C;
            dc = dc.split(/\D/);
            if (dc.length != 6) {
                this.options.cible.html("Date non valide");
                return false
            };
            dc = dc.map(function(e) {
                return parseInt(e)
            });
            dc = ((t = dc[2]) < 10 ? "0" + t : t) + "-" + ((t = dc[1]) < 10 ? "0" + t : t) + "-" + ((t = dc[0]) < 10 ? "0" + t : t) + "T" + ((t = dc[3]) < 10 ? "0" + t : t) + ":" + ((t = dc[4]) < 10 ? "0" + t : t) + ":" + ((t = dc[5]) < 10 ? "0" + t : t);
            dc = new Date(dc);
            dfs = parseInt((dc.getTime() > d.getTime()) ? (dc.getTime() - d.getTime()) / 1000 : 0);
            s = dfs % 60;
            dfs -= s;
            j = parseInt(dfs / 0x15180);
            dfs -= j * 0x15180;
            h = parseInt(dfs / 3600);
            dfs -= h * 3600;
            m = dfs / 60;
            date["j"] = "" + j;
            while (date["j"].length < parseInt(this.options.n_J)) {
                date["j"] = "0" + date["j"];
            }
            date["h"] = h < 10 ? "0" + h : "" + h;
            date["m"] = m < 10 ? "0" + m : "" + m;
            date["s"] = s < 10 ? "0" + s : "" + s;
            for (i in date) {
                for (t = 0; t < date[i].length; t++) {
                    date[i + (t + 1)] = date[i][t];
                }
            }
            /*Actions*/
            t = v.match(/\{[jhms][0-9]?\}/g);
            for (i in t) {
                v = v.replace(t[i], (u = date[t[i].slice(1, -1)]) ? u : "mode " + t[i] + " inconnu")
            }
            this.cible instanceof jQuery ? this.cible.html(v) : this.cible.innerHTML = v;
            /**/
            this.instance_a_rebours = setTimeout(this.a_rebours.bind(r, date_cible), 1000);
            if (0 >= parseInt((dc.getTime() > d.getTime()) ? (dc.getTime() - d.getTime()) / 1000 : 0)) {
                clearTimeout(this.instance_a_rebours);
                this.fin_a_rebours()
            }
        } catch (e) {
            console.log(e)
        }
    },
    fin_a_rebours: function() {
        try {
            /*votre code*/ } catch (e) {
            console.log(e)
        }
    },
    optionsParDefaut: function() {
        return {
            /*options de base*/
            /*taille fixe jours*/
            n_J: 3,
            /*format Horloge*/
            f_H: '{h}:{m}:{s}',
            /*format Compte a rebours*/
            f_C: '{j} jours {h}:{m}:{s}'
        }
    }
};

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Création du script horloge et / ou compte à rebours


Insérer une horloge sur votre forum


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Horloge" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
$(function() {
    var x = new horloge($("#horloge1"));
    x.heure();
});

Vous pouvez modifier l'ID horloge1 par celui de votre choix.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Insérer un compte à rebours sur votre forum


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Compte à rebours" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
$(function() {
    var x = new horloge($("#compte1"));
    x.a_rebours("25/12/2021-00:00:00");
});

Vous pouvez modifier l'ID compte1 par celui de votre choix. En ce qui concerne la fin du compte à rebours, il est nécessaire de modifier les éléments contenus dans x.a_rebours, à savoir la date en format "français" : JJ/MM/AAAA-hh:mm:ss.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Afficher l'horloge ou / et le compte à rebours


Il vous suffit de placer le code HTML suivant dans un endroit où le HTML est autorisé : sujets (et donc messages), pages HTML, Widgets... :

Code:
<span id="ID"></span>

Il convient de remplacer la variable ID par horloge1 et / ou compte1 (ou par l'ID choisi dans le point 2 de ce tutoriel).

Remarque :

Personnaliser l'affichage


Si vous voulez personnaliser l'affichage, à savoir ne pas vous contenter d'un affichage texte, rendez-vous dans la deuxième partie de ce tutoriel horloge et / ou compte à rebours (avec personnalisation).



Dernière édition par Walt le Jeu 16 Déc 2021 - 13:07, édité 2 fois (Raison : Mise à jour)
no_way

no_way
Aidactif
Aidactif

Messages : 2212
Inscrit(e) le : 26/03/2010

Voir le profil de l'utilisateur
no_way a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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