Horloge/compte à rebours sans personnalisation

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