Horloge/compte à rebours sans personnalisation

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

  • 0

Astuce 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 Bipo le Lun 11 Juil 2022 - 19:33, édité 4 fois (Raison : Mise à jour)
no_way

no_way
Membre actif

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

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