Auteur
Grafikart

31 Commentaires

Debc28b9e8030805966ebfe4eadb31ac?s=200&r=pg&d=mm
Alex59, 11-01-2014 01:49:18 - Répondre

Merci pour ce tutoriel :)

444a7aed5a54003a13c01a889288af3d?s=200&r=pg&d=mm
dnartreb, 05-08-2013 19:10:55 - Répondre

Merci beaucoup pour ce tutoriel !!

5c6282ee981966399df306f27ecc80a4?s=200&r=pg&d=mm
Asgarth, 10-05-2013 00:23:21 - Répondre

Bonjour,

Merci pour le tuto,

J'ai suivi la vidéo à la lettre mais cependant j'ai un souci au niveau de l'affichage du nombre de jour. Cela ne m'affiche pas 1 mais 31 ou plus par rapport à la date voulu comme par exemple le 10/05/2013.
Je me situe à l'île Maurice donc un fuseau horaire de +4 mais je ne crois pas que cela ait un rapport.

Voici les lignes de codes :

var launch = new Date(2013,05,10,00,20,00);
var jours=$('#jours');
var heures=$('#heures');
var minutes=$('#minutes');
var secondes=$('#secondes');

setDate();
function setDate()
{
var now = new Date();
var s = ((launch.getTime() - now.getTime())/1000) - now.getTimezoneOffset()*60;
var d = Math.floor(s/84600);
jours.html('<strong>'+d+'</strong>Jour'+(d>1?'s':''));
s -= d*86400;

var h = Math.floor(s/3600);
heures.html('<strong>'+h+'</strong>Heure'+(h>1?'s':''));
s -= h*3600;

var m = Math.floor(s/60);
minutes.html('<strong>'+m+'</strong>Minute'+(m>1?'s':''));
s -= m*60;

s = Math.floor(s);
secondes.html('<strong>'+s+'</strong>Seconde'+(s>1?'s':''));

setTimeout(setDate,1000);
}

5c6282ee981966399df306f27ecc80a4?s=200&r=pg&d=mm
Asgarth, 10-05-2013 00:25:50 - Répondre

Voici une exemple de résultat obtenus :

31Jours
3Heures
57Minutes
19Secondes

Merci d'avance

Fb649e0161e3496765c6eadc902b3c79?s=200&r=pg&d=mm
kyky, 31-08-2013 10:24:13 - Répondre

Moi ça me fais la même chose, j'ai beau chercher je ne trouve pas d'où sa peut venir.
La date du serveur est bonne, alors je ne vois pas se que sa peut être.

27c6a7ff1421f362db967a2b5b70535b?s=200&r=pg&d=mm
Nakor404, 27-02-2013 23:56:38 - Répondre

Merci pour le tuto :)

3451a9aa20f2ee9ad4cf0ecb73414320?s=200&r=pg&d=mm
OliDV3, 27-01-2013 04:31:27 - Répondre

Merci du tutoriel

5a290e18c66722f62bd319473e8994f1?s=200&r=pg&d=mm
Nono05, 11-08-2012 00:22:45 - Répondre

merci pour ce tuto, j'ai voulu cacher la class="content" quand le décompte est <0 mais j'ai un problème dans ma condition.

5a290e18c66722f62bd319473e8994f1?s=200&r=pg&d=mm
Nono05, 11-08-2012 01:22:38 - Répondre

c bon j'ai pu régler le problème! :-)

57c80e1019756bb4a13ac84530c7d0b2?s=200&r=pg&d=mm
LegendPJ, 10-05-2012 15:06:12 - Répondre

Merci beaucoup ! Super tuto une fois de plus

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Titirobiss, 11-03-2012 00:12:47 - Répondre

Merci pour ce tuto bien foutu, et que j'ai appliqué en direct sur un site en construction (que j'ai mis en lien)
Et vive Béziers !! :P

9d78691f279dddb55b4045cb6b16e819?s=200&r=pg&d=mm
btsgi, 09-03-2012 17:34:14 - Répondre

Merci Pour ce tuto magic ;)

9d78691f279dddb55b4045cb6b16e819?s=200&r=pg&d=mm
btsgi, 09-03-2012 13:57:25 - Répondre

Bonjour c'est un très beau tuto, a propos de la class date il commence (0-11) au niveau de "mois".
merci ;)

F574f9a654a53d1e29ef5eef01ddee38?s=200&r=pg&d=mm
pierrot, 16-02-2012 11:35:15 - Répondre

Super tuto! Excellent tous tes tutos ;)

8d24e196316e675bea0f40fe57a546d6?s=200&r=pg&d=mm
diabless6, 13-01-2012 20:14:56 - Répondre

Bonjour,
Très bon tuto, juste pour UTC je vais devoir repasser en boucle parce que Zzzzz :D

Moi j'avais piquer ce script sur le site d'HarryPotter pour la sortie finale :

jQuery(document).ready(function(){
var c=jQuery(".timer");
var a=new Date(2011,07,14,17,25,0,0);// 0=janvier...Aout=7 jour: dimanche->0 lundi->1
var d=Math.floor(a.getTime()/1000);
var b=Math.floor((new Date()).getTime()/1000);
var h=jQuery(".jour",c);
var e=jQuery(".heure",c);
var f=jQuery(".min",c);
var g=jQuery(".sec",c);

var i=function(){
var o=new Date();
var k=Math.floor(o.getTime()/1000);
if(b>=k){return}b=k;
var j=d-k;
if(j<0){return}var n=Math.floor(j/86400);
var m=Math.floor(j/3600)-(n*24);
var l=Math.floor(j/60)-(((n*24)+m)*60);
var p=Math.floor(j)-(((((n*24)+m)*60)+l)*60);
if(n<10){n="0"+n}if(m<10){m="0"+m}if(l<10){l="0"+l}if(p<10){p="0"+p}h.html(n);
e.html(m);f.html(l);g.html(p)};
setInterval(i,200)})();

ça y ressemble un peu, mais j'avais rien pigé à l'algo :(

J'avais essayé à une date donnée pas forcément 0J 0H 0M 0S mais 1J 0H 0M 0M par exemple de faire une action:

var $var = h.text(); //récupère la valeur
$("aside h1").text($var); // la place dans h1
//console.log($var);
$valeur = $("aside h1").text(); //récupère la valeur en h1 en format text
console.log($valeur);
if ( $valeur=="1" ) { $("article img").fadeOut(200); }

Mais là ça cloche, et quand le count est à 0.0.0.0 ben ça ne marchait pas aussi.

Je vais essayé avec votre script si je peux faire un évènement.

7550
Splaze, 07-01-2012 11:45:28 - Répondre

J'aime assez cette manière de présenter le compteur, le design et simple et épuré. Merci pour le tuto :)

5bc1f2812287a66c62457600c8c14eca?s=200&r=pg&d=mm
graphz, 03-01-2012 17:12:37 - Répondre

Salut, merci pour ce tuto super pratique.
Par contre j'ai une petite question, peut t'on stopper le décompte quand il a zéro ?
Je suis graphiste et je ne suis pas très doué :)

Sinon encore merci, un site a mettre dans ces favoris

770042d37a9bbe692427bbe0129bc11a?s=200&r=pg&d=mm
don_yassine, 26-12-2011 02:17:18 - Répondre

Merci beaucoup très pratique

15cc99d7286639259bc9f512618a2f8f?s=200&r=pg&d=mm
doudouzeb, 17-12-2011 20:15:29 - Répondre

Merci pour ce script qui me sers en cette fin d'année 2011;

15afacd9040e9655d5085ccc0795ad1e?s=200&r=pg&d=mm
lee, 29-11-2011 16:44:09 - Répondre

Super tuto comme d'habitude et très utile !
Merci beaucoup

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
olive140, 29-11-2011 15:04:30 - Répondre

Cela me rappelle le site Battlefield 3

222da7001bff51e4f8e77303ca4b3c56?s=200&r=pg&d=mm
rizerzero, 28-11-2011 22:44:28 - Répondre

bravo , encore un super pti tutoriel , c'est très bien pensé . toute fois j'aurais opté pour autre chose que du js pour avoir la date local de l'utilisateur car si par exemple le conteur affiche a la fin un lien de ddl , ou un code ou autre ca serait embêtant que les utilisateur puissent l'afficher avant la date prévu alors j'aurais opté pour une communication asynchrone avec un serveur qui me retournerait les deux dates en suite je laisserait le compteur tourner avec une fonction js , pourquoi pas une suite a ce tuto dans cette optique ;)
encore bravo et MERCI ;)

92c4a6caedb5195b73dcb23a87809d08?s=200&r=pg&d=mm
Babou, 27-11-2011 18:15:34 - Répondre

Super génial, comme d'habitude !
Ca servira plus d'un, y compris moi :)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
jerome, 27-11-2011 17:51:25 - Répondre

Merci,
Pas de demo en live ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Amine, 27-11-2011 17:02:51 - Répondre

Super tuto comme tjrs merci bcpppp grafikart !!

63a91d763a1eae9b3789dc5d52784eef?s=200&r=pg&d=mm
PaulB319, 27-11-2011 10:29:40 - Répondre

Super tuto.

8b5c66304ba8f7ab9c4190c2e4ebfa4f?s=200&r=pg&d=mm
hellsingblack, 26-11-2011 21:35:40 - Répondre

sa serait intéressant de faire le même tuto mais avec les timezones, afficher la date selon la localisation et la date system de l'utilisateur

Ac980a822a76674dfd06845248f11674?s=200&r=pg&d=mm
omar berrayti, 26-11-2011 20:58:26 - Répondre

Slùt Grafikart,,

Super tuto mercii beaucoup,,

Croyer moi ,, ce matinj j'ai commencé a reflichir comment faire cette truc,, et voila j'ai trouve la solution,,

Encore un grand merci !!

A557d02a1b288ec87443e13143ffcaaa?s=200&r=pg&d=mm
BlackDesign, 26-11-2011 20:32:49 - Répondre

Super tuto encore une fois.

A7f2a2f14c336edfd6f1c223e742b0d0?s=200&r=pg&d=mm
Canonier, 26-11-2011 19:48:31 - Répondre

Yeah utile ca ^^
Merci Graphikart :)

9794
graphiweb, 26-11-2011 19:41:05 - Répondre

Merci sa me seras utile pour les users qui passe sur le site pour connaitre la date de lancement :)