Discussion :

[casper62110]

Bonjour voila je souhaite pour mon site faire un compteur
qui va m afficher le nombre de xxxx par jour
sachant qu il doit etre remis a 0 a 00h00:00 et doit aller jusque 456.458.521
a 23h59:59

soit monter de 5283 toutes les secondes au depart de 00h00:00

ps se code doit tourner sans avoir a réactualiser la page

Un peu comme ici

http://www.g1script.com/home/LANGAGE...pt/math/36.htm

a part que le compteur est remis a 0 a minuit

merci de votre aide je débute en php mais en javascript j y connait vraiment rien

[Willpower]

Pour avoir un compteur précis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function getSecondsOfCurrentDay(day){
	return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
 
function update(){
	document.getElementById('compteur').innerHTML = 5283 * getSecondsOfCurrentDay();
}
 
setInterval(update,1000);

edit:

un petit exemple plus complet qui montre pourquoi il ne faut pas utiliser une simple incrémentation toutes les secondes (setInterval) si l'on veut de la précision :

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
<div id="compteur1"></div>
<div id="compteur2"></div>
<div id="diff"></div>
<script type="text/javascript" >
 
var compteur1 = document.getElementById('compteur1');
var compteur2 = document.getElementById('compteur2');
var diff = document.getElementById('diff');
var currentVal;
 
function getSecondsOfCurrentDay(day){
	return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
 
function update1(){
	compteur1.innerHTML = 100 * getSecondsOfCurrentDay();
}
 
 
function update2(){
	currentVal = currentVal || parseInt(compteur1.innerHTML)-1; // initialisation sur la valeur du compteur1
	currentVal += 1;
	compteur2.innerHTML = currentVal;
}
 
function difference(){
	diff.innerHTML = (parseFloat(compteur1.innerHTML)-parseFloat(compteur2.innerHTML))/100;
}
 
setInterval(update1,10);
setInterval(update2,10);
setInterval(difference,1000);
 
 
 
 
</script>

[casper62110]

si j ecri cela dans mon fichier php rien ne saffiche pourquoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script>function getSecondsOfCurrentDay(day){
	return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
 
function update(){
	document.getElementById('compteur').innerHTML = 5283 * getSecondsOfCurrentDay();
}
 
setInterval(update,1000);
</script>

[Bovino]

Peut-être parce qu'aucun élément dans ta page n'a d'id qui vaut "compteur" ?

[Willpower]

si j ecri cela dans mon fichier php rien ne saffiche pourquoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="compteur"></div>
<script>function getSecondsOfCurrentDay(day){
	return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
 
function update(){
	document.getElementById('compteur').innerHTML = 5283 * getSecondsOfCurrentDay();
}
 
setInterval(update,1000);
</script>

[casper62110]

merci beaucoup

une dernière question peut on bidouiller un truc pour me permette d'avoir le compteur qui ressemble a cela

http://www.blog-nouvelles-technologi...e-html-css-js/

merci edit le rouge

[casper62110]

j ai trouver

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
function getSecondsOfCurrentDay(day){
	return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
// Array to hold each digit's starting background-position Y value
var initialPosPad = [0, -618, -1236, -1854, -2472, -3090, -3708, -4326, -4944, -5562];
// Amination frames
var animationFramesPad = 5;
// Frame shift
var frameShiftPad = 103;
 
// Starting number
var theNumberPad = Math.ceil(getSecondsOfCurrentDay()*(1700000000000/86400));
 
// Increment
var incrementPad = Math.ceil(1700000000000/86400);
// Pace of counting in milliseconds
var pacePad = 200;
 
// Initializing variables
var digitsOldPad = [], digitsNewPad = [], subStartPad, subEndPad, xPad, yPad;
 
// Function that controls counting
function doCountPad(){
	// In this example, we're padding the numbers
	var x = pad(theNumberPad.toString());
	theNumberPad += incrementPad;
	var y = pad(theNumberPad.toString());
	digitCheckPad(x,y);
}
 
// This checks the old count value vs. new value, to determine how many digits
// have changed and need to be animated.
function digitCheckPad(xPad,yPad){
	if (yPad.length > xPad.length) addDigitPad(yPad.length);
	var digitsOldPad = splitToArrayPad(xPad),
	digitsNewPad = splitToArrayPad(yPad);
	for (var i = 0, c = digitsNewPad.length; i < c; i++){
		if (digitsNewPad[i] != digitsOldPad[i]){
			animateDigitPad(i, digitsOldPad[i], digitsNewPad[i]);
		}
	}
}
 
// Animation function
function animateDigitPad(nPad, oldDigitPad, newDigitPad){
	// I want three different animations speeds based on the digit,
	// because the pace and increment is so high. If it was counting
	// slower, just one speed would do.
	// 1: Changes so fast is just like a blur
	// 2: You can see complete animation, barely
	// 3: Nice and slow
	var speedPad;
	switch (nPad){
		case 0:
			speedPad = pacePad/8;
			break;
		case 1:
			speedPad = pacePad/4;
			break;
		default:
			speedPad = pacePad/2;
			break;
	}
	// Cap on slowest animation can go
	speedPad = (speedPad > 100) ? 100 : speedPad;
	// Get the initial Y value of background position to begin animation
	var posPad = initialPosPad[oldDigitPad];
	// Each animation is 5 frames long, and 103px down the background image.
	// We delay each frame according to the speed we determined above.
	for (var k = 0; k < animationFramesPad; k++){
		posPad = posPad - frameShiftPad;
		if (k == (animationFramesPad - 1)){
			$("#pad" + nPad).delay(speedPad).animate({'background-position': '0 ' + posPad + 'px'}, 0, function(){
				// At end of animation, shift position to new digit.
				$("#pad" + nPad).css({'background-position': '0 ' + initialPosPad[newDigitPad] + 'px'}, 0);
			});
		}
		else{
			$("#pad" + nPad).delay(speedPad).animate({'background-position': '0 ' + posPad + 'px'}, 0);
		}
	}
}
 
// Splits each value into an array of digits
function splitToArrayPad(input){
	var digitsPad = new Array();
	for (var i = 0, c = input.length; i < c; i++){
		var subStartPad = input.length - (i + 1),
		subEndPad = input.length - i;
		digitsPad[i] = input.substring(subStartPad, subEndPad);
	}
	return digitsPad;
}
 
// Adds new digit
function addDigitPad(lenPad){
	var liPad = Number(lenPad) - 1;
	if (liPad % 3 == 0) $("#countdown-pad").prepend('<li class="seperator"></li>');
	$("#countdown-pad").prepend('<li id="pad' + liPad + '"></li>');
	$("#pad" + liPad).css({'background-position': '0 ' + initialPosPad[1] + 'px'});
}
 
// Sets the correct digits on load
function initialDigitCheckPad(initialPad){
	// Creates the right number of digits
	// In this example, we're padding the numbers
	var paddedPad = pad(initialPad.toString());
	var countPad = paddedPad.length;
	var bitPad = 1;
	for (var i = 0; i < countPad; i++){
		$("#countdown-pad").prepend('<li id="pad' + i + '"></li>');
		if (bitPad != (countPad) && bitPad % 3 == 0) 
			$("#countdown-pad").prepend('<li class="seperator"></li>');
		bitPad++;
	}
	// Sets them to the right number
	var digitsPad = splitToArrayPad(initialPad.toString());
	for (var i = 0, c = digitsPad.length; i < c; i++){
		$("#pad" + i).css({'background-position': '0 ' + initialPosPad[digitsPad[i]] + 'px'});
	}
}
 
// Generates a good random number
// <a href="http://www.electrictoolbox.com/pad-number-zeroes-javascript/" target="_blank">http://www.electrictoolbox.com/pad-n...es-javascript/</a>
function pad(str, length) {
    var size = 11; // For 72 billion
    while (str.length < size) {
        str = '0' + str;
    }
    return str;
}
 
// Start it up
initialDigitCheckPad(theNumberPad);
setInterval(doCountPad, pacePad);