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?
hromada.dan
Points
21
Voici une version React (native) :
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
export default class CountUp extends Component {
state = {
seconds: null,
}
get formatedTime() {
const { seconds } = this.state;
return [
pad(parseInt(seconds / 60)),
pad(seconds % 60),
].join(':');
}
componentWillMount() {
this.setState({ seconds: 0 });
}
componentDidMount() {
this.timer = setInterval(
() => this.setState({
seconds: ++this.state.seconds
}),
1000
);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<View>
<Text>{this.formatedTime}</Text>
</View>
);
}
}
function pad(num) {
return num.toString().length > 1 ? num : `0${num}`;
}
trolle
Points
389
En voici un qui utilise .padStart() :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>timer</title>
</head>
<body>
<span id="minutes">00</span>:<span id="seconds">00</span>
<script>
const minutes = document.querySelector("#minutes")
const seconds = document.querySelector("#seconds")
let count = 0;
const renderTimer = () => {
count += 1;
minutes.innerHTML = Math.floor(count / 60).toString().padStart(2, "0");
seconds.innerHTML = (count % 60).toString().padStart(2, "0");
}
const timer = setInterval(renderTimer, 1000)
</script>
</body>
</html>De MDN :
La méthode padStart() ajoute à la chaîne de caractères actuelle une autre chaîne de caractères (répétée, si nécessaire) de sorte que la chaîne résultante atteigne la longueur donnée. Le remplissage est appliqué à partir du début (à gauche) de la chaîne de caractères actuelle.
ÖMER TAŞCI
Points
192
C'est ainsi que j'ai construit l'élément timerView qui ne s'embrouille pas en appelant la fonction plusieurs fois.
function startOTPCounter(countDownDate){
var countDownDate = '21/01/2022 16:56:26';//Change this date!!
var x = setInterval(function() {
var now = new Date().getTime();
var distance = moment(countDownDate, 'DD/MM/YYYY hh:mm:ss').toDate().getTime() - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timerView").innerHTML = minutes + "min " + seconds + "sn";
if (distance < 0) {
clearInterval(x);
// document.location.reload();
document.getElementById("timerView").innerHTML = "Expired!";
}
}, 1000);
if(window.preInterval != undefined){
clearInterval(window.preInterval);
}
window.preInterval = x;
//if(sessionStorage.preInterval != undefined){
// clearInterval(sessionStorage.preInterval);
//}
//sessionStorage.preInterval = x;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<p style="color:red; font-size: 15px; text-align:center; " id='timerView'></p>
<input type="button" name="otpGonder" value="Send Again" class="buton btn btn-default " onclick="startOTPCounter()" id="otpGonder">
</div>
</body>
</html>- Réponses précédentes
- Plus de réponses
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.