IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Compteur qui tourne en boucle


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    89
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 89
    Points : 46
    Points
    46
    Par défaut Compteur qui tourne en boucle
    Bonjour,

    Merci pour votre aide

    J'ai un bout de code en JS pour faire tourner un decompte, mai s lorsqu'il arrive à zéro le décompte continue

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    //<![CDATA[
     
    // SET TARGET DATE HERE
    var target = 'February 28, 2014';
     
    // That's all you need to do.
     
    /************************************************************************/
    // Initial digit position for each number graphic
    // 9-0
    var initialPosCountdown = [-5562, -4944, -4326, -3708, -3090, -2472, -1854, -1236, -618, 0];
    // 5-0 (first minute and second digit)
    var initialMidPosCountdown = [-3090, -2472, -1854, -1236, -618, 0];
    // 2-0 (first hour digit)
    var initialSmallPosCountdown = [-1236, -618, 0];
    var classNamesCountdown = ['jours', 'heures', 'minutes', 'secondes'];
    var idNamesCountdown = ['d', 'h', 'm', 's'];
    var animationFramesCountdown = 5;
    var frameShiftCountdown = 103;
     
    // If no number in URL (?date=1/1/11), then use default one
    target = (window.location.search == "") ? target : window.location.search.substring(6);
     
    // Starting numbers
    var nowCountdown = new Date().getTime();
    var endCountdown = Date.parse(target);
    // Fix if date is in past
    if (endCountdown < nowCountdown){
     
    //document.location.href="test.php"
    //window.location='test.php'
    //window.location = "test.php/"
    //window.location.replace("./jeux.php");
     
    }
    var theDiffCountdown = endCountdown-nowCountdown;
    var theDiffStringCountdown = getTimeStringCountdown(theDiffCountdown);
     
    // Increment (count one second at a time)
    var incrementCountdown = 1000;
    // Pace of counting in milliseconds (refresh digits every second)
    var paceCountdown = 1000;
     
    // Function that controls counting
    function doCountCountdown(){
    	var x = getTimeStringCountdown(theDiffCountdown);
    	theDiffCountdown -= incrementCountdown;
    	var y = getTimeStringCountdown(theDiffCountdown);
    	// For debugging
    	//console.log(y);
    	digitCheckCountdown(x,y);
    }
     
    // This checks the old value vs. new value, to determine how many digits need to be animated.
    function digitCheckCountdown(x,y){
    	var a = x.split(':');
    	var b = y.split(':');
    	for (var i = 0, c = a.length; i < c; i++){
    		if (a[i].length < 2) a[i] = '0' + a[i];
    		if (b[i].length < 2) b[i] = '0' + b[i];
    		var countA = a[i].toString().length;
    		var countB = b[i].toString().length;
    		if (countB < countA) removeDigitCountdown(i, countB);
    		for (var j = 0; j < countB; j++){
    			if (b[i].charAt(j) != a[i].charAt(j)){
    				var which = idNamesCountdown[i] + j;
    				animateDigitCountdown(which, a[i].charAt(j), b[i].charAt(j));
    			}
    		}
    	}
    }
     
    // Function to break the time into day:hour:minute:second
    function getTimeStringCountdown(d){
    	var diff = d;
    	var days = Math.floor(diff / 86400000);
    	diff -= days * 86400000;
    	var hours = Math.floor(diff / 3600000);
    	diff -= hours * 3600000;
    	var minutes = Math.floor(diff / 60000);
    	diff -= minutes * 60000;
    	var seconds = Math.floor(diff / 1000);
    	return days + ':' + hours + ':' + minutes + ':' + seconds;
    }
     
    // Looks in correct array to get the digit's position
    function getPosCountdown(id, digit){
    	if (id == 's0' || id == 'm0'){
    		return initialMidPosCountdown[digit];
    	}
    	else if (id == 'h0'){
    		return initialSmallPosCountdown[digit];
    	}
    	else{
    		return initialPosCountdown[digit];
    	}
    }
     
    // Animation function
    function animateDigitCountdown(which, oldDigit, newDigit){
    	var speed = 80;
    	var pos = getPosCountdown(which, oldDigit);
    	var newPos = getPosCountdown(which, newDigit);
    	// Each animation is 5 frames long, and 103px down the background image.
    	// We delay each frame according to the speed above.
    	for (var k = 0; k < animationFramesCountdown; k++){
    		pos -= frameShiftCountdown;
    		if (k == (animationFramesCountdown - 1)){
    			$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0, function(){
    				// At end of animation, shift position to new digit.
    				$("#" + which).css({'background-position': '0 ' + newPos + 'px'}, 0);
    			});
    		}
    		else{
    			$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);
    		}
    	}
    }
     
    // Remove digit
    function removeDigitCountdown(i,count){
    	$("li#" + idNamesCountdown[i] + count).remove();
    }
     
    // Sets the correct digits on load
    function initialDigitCheckCountdown(initial){
    	// Creates the html
    	var a = initial.split(':');
    	for (var i = 0, c = a.length; i < c; i++){
    		if (a[i].length < 2) a[i] = '0' + a[i];
    		var count = a[i].toString().length;
    		var html = '<div class="set"><ul class="' + classNamesCountdown[i] + '">';
    		var bit = count;
    		for (var j = 0; j < count; j++){
    			bit--;
    			html += '<li id="' + idNamesCountdown[i] + j + '"></li>';
    			if (bit != 0 && bit != (count) && bit % 3 == 0) html += '<li class="comma"></li>';
    		}
    		html += '</ul><h2>' + classNamesCountdown[i].toUpperCase() + '</h2>';
    		// If you don't like the ':' separator, remove the following line
    		if (i != 3) html += '</div><div class="separator">:</div>';
    		//
    		$("#countdown-blog").append(html);
    	}
    	// Sets digits to the right number
    	for (var n = 0, cn = a.length; n < cn; n++){
    		count = a[n].toString().length;
    		for (var m = 0; m < count; m++){
    			var thisID = idNamesCountdown[n] + m;
    			var thisPos = getPosCountdown(thisID, a[n].charAt(m));
    			$("#" + idNamesCountdown[n] + m).css({'background-position': '0 ' + thisPos + 'px'});
    		}
    	}
    }
     
    // Start it up
    initialDigitCheckCountdown(theDiffStringCountdown);
    setInterval(doCountCountdown, paceCountdown);
     
    //]]>

    A la ligne 28, il y a un contrôle qui est fait et si le decompte est inférieur à zéro il faut le rediriger (le visiteur) vers la page test.php.



    Mais cela ne fonctionne pas, alors j'ai mis les 4 lignes de redirection en commentaire.

    Si quelqu'un peut m'aider par avance un grand merci.


  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Bigre, j'ai rarement vu un code aussi compliqué pour un simple décompte. En tout cas les lignes dont tu parles, en plus d'être fausses, ne sont valables que si le décompte est déjà passé au chargement de la page. Ce code n'est pas réinterprété à chaque tour de compteur donc aucune chance que ça fonctionne.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    89
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 89
    Points : 46
    Points
    46
    Par défaut
    merci pour ta réponse .

    voilà le bout de code en html qui fait appel au code en javascript

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    <script type="text/javascript" src="countdown.js">
    </script>
    Que rajouter au code html ci dessus pour que le code en JS soit réinterprété à chaque tour de compteur et renvoie le visiteur sur une page dés le compteur arrive à zéro ?

    Par avance merci pour votre aide

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    C'est le script lui-même qu'il faut modifier, pas le HTML. Le contrôle que tu as remarqué en ligne 28, tu dois le faire également à chaque tour de compteur. La fonction appelée à chaque tour est celle appelée avec setInterval : paceCountdown

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    89
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 89
    Points : 46
    Points
    46
    Par défaut
    merci pour tout mais j'ai trouvé (rajout des lignes 82 à 85)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
     
     
    //<![CDATA[
     
    // SET TARGET DATE HERE
    var target = 'February 28, 2014';
     
    // That's all you need to do.
     
    /************************************************************************/
    // Initial digit position for each number graphic
    // 9-0
    var initialPosCountdown = [-5562, -4944, -4326, -3708, -3090, -2472, -1854, -1236, -618, 0];
    // 5-0 (first minute and second digit)
    var initialMidPosCountdown = [-3090, -2472, -1854, -1236, -618, 0];
    // 2-0 (first hour digit)
    var initialSmallPosCountdown = [-1236, -618, 0];
    var classNamesCountdown = ['jours', 'heures', 'minutes', 'secondes'];
    var idNamesCountdown = ['d', 'h', 'm', 's'];
    var animationFramesCountdown = 5;
    var frameShiftCountdown = 103;
     
    // If no number in URL (?date=1/1/11), then use default one
    target = (window.location.search == "") ? target : window.location.search.substring(6);
     
    // Starting numbers
    var nowCountdown = new Date().getTime();
    var endCountdown = Date.parse(target);
    // Fix if date is in past
    if (endCountdown < nowCountdown){
    }
    var theDiffCountdown = endCountdown-nowCountdown;
    var theDiffStringCountdown = getTimeStringCountdown(theDiffCountdown);
     
    // Increment (count one second at a time)
    var incrementCountdown = 1000;
    // Pace of counting in milliseconds (refresh digits every second)
    var paceCountdown = 1000;
     
     
     
    // Function that controls counting
    function doCountCountdown(){
    	var x = getTimeStringCountdown(theDiffCountdown);
    	theDiffCountdown -= incrementCountdown;
    	var y = getTimeStringCountdown(theDiffCountdown);
    	// For debugging
    	//console.log(y);
    	digitCheckCountdown(x,y);
    }
     
    // This checks the old value vs. new value, to determine how many digits need to be animated.
    function digitCheckCountdown(x,y){
    	var a = x.split(':');
    	var b = y.split(':');
    	for (var i = 0, c = a.length; i < c; i++){
    		if (a[i].length < 2) a[i] = '0' + a[i];
    		if (b[i].length < 2) b[i] = '0' + b[i];
    		var countA = a[i].toString().length;
    		var countB = b[i].toString().length;
    		if (countB < countA) removeDigitCountdown(i, countB);
    		for (var j = 0; j < countB; j++){
    			if (b[i].charAt(j) != a[i].charAt(j)){
    				var which = idNamesCountdown[i] + j;
    				animateDigitCountdown(which, a[i].charAt(j), b[i].charAt(j));
    			}
    		}
    	}
    }
     
    // Function to break the time into day:hour:minute:second
    function getTimeStringCountdown(d){
    	var diff = d;
    	var days = Math.floor(diff / 86400000);
    	diff -= days * 86400000;
    	var hours = Math.floor(diff / 3600000);
    	diff -= hours * 3600000;
    	var minutes = Math.floor(diff / 60000);
    	diff -= minutes * 60000;
    	var seconds = Math.floor(diff / 1000);
     
    	if ((days==0) && (hours==0) && (minutes==0) && (seconds==0)) 
    	{ 
    	window.location.replace("test.php");
    	}
     
    	return days + ':' + hours + ':' + minutes + ':' + seconds;
     
    }
     
    // Looks in correct array to get the digit's position
    function getPosCountdown(id, digit){
    	if (id == 's0' || id == 'm0'){
    		return initialMidPosCountdown[digit];
    	}
    	else if (id == 'h0'){
    		return initialSmallPosCountdown[digit];
    	}
    	else{
    		return initialPosCountdown[digit];
    	}
    }
     
    // Animation function
    function animateDigitCountdown(which, oldDigit, newDigit){
    	var speed = 80;
    	var pos = getPosCountdown(which, oldDigit);
    	var newPos = getPosCountdown(which, newDigit);
    	// Each animation is 5 frames long, and 103px down the background image.
    	// We delay each frame according to the speed above.
    	for (var k = 0; k < animationFramesCountdown; k++){
    		pos -= frameShiftCountdown;
    		if (k == (animationFramesCountdown - 1)){
    			$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0, function(){
    				// At end of animation, shift position to new digit.
    				$("#" + which).css({'background-position': '0 ' + newPos + 'px'}, 0);
    			});
    		}
    		else{
    			$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);
    		}
    	}
    }
     
    // Remove digit
    function removeDigitCountdown(i,count){
    	$("li#" + idNamesCountdown[i] + count).remove();
    }
     
    // Sets the correct digits on load
    function initialDigitCheckCountdown(initial){
    	// Creates the html
    	var a = initial.split(':');
    	for (var i = 0, c = a.length; i < c; i++){
    		if (a[i].length < 2) a[i] = '0' + a[i];
    		var count = a[i].toString().length;
    		var html = '<div class="set"><ul class="' + classNamesCountdown[i] + '">';
    		var bit = count;
    		for (var j = 0; j < count; j++){
    			bit--;
    			html += '<li id="' + idNamesCountdown[i] + j + '"></li>';
    			if (bit != 0 && bit != (count) && bit % 3 == 0) html += '<li class="comma"></li>';
    		}
    		html += '</ul><h2>' + classNamesCountdown[i].toUpperCase() + '</h2>';
    		// If you don't like the ':' separator, remove the following line
    		if (i != 3) html += '</div><div class="separator">:</div>';
    		//
    		$("#countdown-blog").append(html);
    	}
    	// Sets digits to the right number
    	for (var n = 0, cn = a.length; n < cn; n++){
    		count = a[n].toString().length;
    		for (var m = 0; m < count; m++){
    			var thisID = idNamesCountdown[n] + m;
    			var thisPos = getPosCountdown(thisID, a[n].charAt(m));
    			$("#" + idNamesCountdown[n] + m).css({'background-position': '0 ' + thisPos + 'px'});
    		}
    	}
    }
     
    // Start it up
    initialDigitCheckCountdown(theDiffStringCountdown);
    setInterval(doCountCountdown, paceCountdown);
     
    //]]>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment arrêter un programme qui tourne en boucle
    Par isa3000 dans le forum Langage
    Réponses: 12
    Dernier message: 07/09/2009, 16h54
  2. [Quartz] Cron Job qui tourne en boucle
    Par K-Kaï dans le forum API standards et tierces
    Réponses: 1
    Dernier message: 07/02/2008, 11h19
  3. cron qui tourne en boucle
    Par crazykangourou dans le forum Shell et commandes GNU
    Réponses: 1
    Dernier message: 24/09/2007, 14h36
  4. Réponses: 1
    Dernier message: 19/12/2005, 13h00
  5. Pb de rand() qui tourne en boucle
    Par MadChris dans le forum MFC
    Réponses: 3
    Dernier message: 26/06/2004, 16h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo