Je suis à la recherche d'un simple compte à rebours en javascript. Tous les scripts que je trouve sont 'all singing all dancing'. Je veux juste un compte à rebours sans jQuery, avec un minimum de tracas, qui affiche en minutes et en secondes. Merci.
Réponses
Trop de publicités?
Cybernetic
Points
2882
Extension de @Chandu, avec quelques ajouts d'interface utilisateur :
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<style>
button {
background: steelblue;
border-radius: 4px;
height: 40px;
width: 100px;
color: white;
font-size: 20px;
cursor: pointer;
border: none;
}
button:focus {
outline: 0;
}
#minutes, #seconds {
font-size: 40px;
}
.bigger {
font-size: 40px;
}
.button {
box-shadow: 0 9px #999;
}
.button:hover {background-color: hotpink}
.button:active {
background-color: hotpink;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<body align='center'>
<button onclick='set_timer()' class='button'>START</button>
<button onclick='stop_timer()' class='button'>STOP</button><br><br>
<label id="minutes">00</label><span class='bigger'>:</span><label id="seconds">00</label>
</body>
</html>
<script>
function pad(val) {
valString = val + "";
if(valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
totalSeconds = 0;
function setTime(minutesLabel, secondsLabel) {
totalSeconds++;
secondsLabel.innerHTML = pad(totalSeconds%60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}
function set_timer() {
minutesLabel = document.getElementById("minutes");
secondsLabel = document.getElementById("seconds");
my_int = setInterval(function() { setTime(minutesLabel, secondsLabel)}, 1000);
}
function stop_timer() {
clearInterval(my_int);
}
</script>Il se présente comme suit :
Logan
Points
2012
@Cybernate, je cherchais le même script aujourd'hui merci pour votre contribution. Cependant, je l'ai modifié juste un peu pour jQuery...
function clock(){
$('body').prepend('<div id="clock"><label id="minutes">00</label>:<label id="seconds">00</label></div>');
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime()
{
++totalSeconds;
$('#clock > #seconds').html(pad(totalSeconds%60));
$('#clock > #minutes').html(pad(parseInt(totalSeconds/60)));
}
function pad(val)
{
var valString = val + "";
if(valString.length < 2)
{
return "0" + valString;
}
else
{
return valString;
}
}
}
$(document).ready(function(){
clock();
});la partie css :
<style>
#clock {
padding: 10px;
position:absolute;
top: 0px;
right: 0px;
color: black;
}
</style>
Gnanasekar S
Points
1480
Note : Toujours inclure jQuery avant d'écrire les scripts de jQuery.
Étape 1 : la fonction setInterval est appelée toutes les 1000ms (1s)
Stpe2 : Dans cette fonction. Incrémenter les secondes
Étape 3 : Vérifiez les conditions
<span id="count-up">0:00</span>
<script>
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function(){
countUp();
}, 1000);
function countUp () {
second++;
if(second == 59){
second = 00;
min = min + 1;
}
if(second == 10){
zeroPlaceholder = '';
}else
if(second == 00){
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min+':'+zeroPlaceholder+second;
}
</script>
daniellmb
Points
10289
codenamejames
Points
325
Je voulais juste mettre mes deux cents. J'ai modifié la fonction de @Ajay Singh pour gérer le compte à rebours et le compte à rebours. Voici un extrait du jsfiddle.
var countDown = Math.floor(Date.now() / 1000)
runClock(null, function(e, r){ console.log( e.seconds );}, countDown);
var t = setInterval(function(){
runClock(function(){
console.log('done');
clearInterval(t);
},function(timeElapsed, timeRemaining){
console.log( timeElapsed.seconds );
}, countDown);
}, 100);
0 votes
Comme j'ai dit tout ce que j'ai trouvé, c'est ... trop. Je veux quelque chose de léger...
0 votes
Il part de 0 et chaque seconde il augmente de 1
8 votes
Var i=0,timer=setInterval(function(){i++},1000) ; - voilà, il commence avec 0 et augmente de 1 toutes les secondes.