Stop et récupérer time FlipClock

**Aymenkn** · 13/09/2015, 01h06

Salut,
j'ai utilisé la bibliothèque FlipClock pour créer timer
je veux crée une methode lorsque appuyer sur le button le timer arrêts et récupérer le temps
il y'a des methode dans la bibliothèque FlipClock comme stop() et getTime(), mais je ne sais pas comment je utilisé
j'ai crée la fonction stoptime, mais ne fontionne pas :/

Nom : Capture du 2015-09-12 23:48:22.png
Affichages : 251
Taille : 12,7 Ko

Nom : Capture du 2015-09-12 23:48:22.png
Affichages : 251
Taille : 12,7 Ko

Code html :

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
<html>
<head>
<link rel="stylesheet" href="flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flipclock.min.js"></script>		
</head>
 
<body onload="setTimeout('https://www.google.fr/',3000);">
 
<div class="clock" style="margin:2em;"></div>
 
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock(3000, {
countdown: true,
clockFace: 'MinuteCounter'
});
});
 
function stoptime(){
clock.stop();
time=clock.getTime();
}
 
document.write(time);
</script>
 
<button id="x" type="button" onClick="stoptime()">Click Me!</button> 
 
</body>
 
</html>

Merci d'avance

**danielhagnoul** · 13/09/2015, 09h37

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$( function(){ // forme abrégée de $(document).ready( function( ){      
  
  var clock = $( ".your-clock" ).FlipClock({
    // ... your options here
  });
  
  setTimeout( function( ){
    var time = clock.getTime(); // Returns the FlipClock.Time object
    
    console.log( time.time ); // 20s OK !
  }, 20000 ); // 20s
   
});

**Aymenkn** · 13/09/2015, 11h14

merci daniel pour votre réponse

ce code ne fonctionne pas

comment je peux stopper le timer avec le button ?

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
 
<div class="clock" style="margin:2em;"></div>
 
<script type="text/javascript">
var clock;
$( function(){  
var clock = $('.clock').FlipClock({
    countdown: true,
clockFace: 'MinuteCounter'
  });
});
 
setTimeout( function( ){
var time = clock.getTime(); // Returns the FlipClock.Time object
console.log(time.time); // 20s OK !
}, 30000 ); // 20s
</script>
 
<button id="x" type="button">Click Me!</button>

**NoSmoking** · 13/09/2015, 18h42

ce code ne fonctionne pas

ça c'est une information précieuse

comment je peux stopper le timer avec le button ?

peut être que la simple lecture de la documentation devrait t'aider http://flipclockjs.com/#methods

**danielhagnoul** · 13/09/2015, 19h42

Autant l'obtention du temps écoulé par time.time ne saute pas aux yeux (il faut parcourir l'API : http://flipclockjs.com/api), autant les options et les méthodes sont faciles à découvrir (http://flipclockjs.com/#methods).

Sans un minimum de recherche et d'effort, vous n'arriverez qu'à : "Cela ne fonctionne pas".

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
$( function(){ // forme abrégée de $(document).ready( function( ){      
 
  var clock = $( ".your-clock" ).FlipClock({
    // ... your options here
  });
 
  setTimeout( function( ){
 
    clock.stop(function() {
      var time = clock.getTime();
      console.log( time.time );
    });
 
  }, 20000 );
 
});

**Aymenkn** · 13/09/2015, 21h24

désolé daniel, je suis encore débutant avec jqery

j'ai résoudre le probleme

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
 
	<body>
 
	<div class="clock" style="margin:2em;"></div>
 
	<script type="text/javascript">
                $( function(){
		var clock = $(".clock").FlipClock(3000,{
                countdown: true,
                clockFace: 'MinuteCounter'
                });
 
                $("#btnStopCounter").click(function(){
                clock.stop();
                var time = clock.getTime();
                $('#int').val(time);
                }); 
         	});         
	</script>
 
	<button id="btnStopCounter">Stop counter</button> 
        <input id="int" type="text" name="lname">
 
	</body>

**danielhagnoul** · 14/09/2015, 10h07

Bien, mais...

Code :

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

1
2
3
4
5
$( "#btnStopCounter" ).on( "click", function( ){
  clock.stop();
  var time = clock.getTime();
  $( "#int" ).val( time.time );
});

Stop et récupérer time FlipClock

jQuery

Discussions similaires

Partager

Partager