Compte à rebours Javasacript en Jours, Heures, Minutes, Secondes
J'essaie de créer une horloge de compte à rebours basée sur le temps. Il n'est pas basé sur current_dates. L'heure initiale qui sera extraite sera d'un fichier php séparé. Ce sera pour un jeu basé sur un navigateur. Lorsque quelqu'un clique sur le bouton pour lancer ce script. il vérifiera si certaines exigences sont remplies et si c'est le cas, ce script se lancera. Basé sur le niveau de l'objet, il tirera la minuterie initiale pour ce niveau en cours. L'espoir qui fait sens. Quoi qu'il en soit j'ai basé le script de minuterie hors du premier code que je fournis.
Ce script ne tient compte que des minutes et des secondes. Je l'ai modifié pour inclure des jours et des heures ainsi. Quelque part dans le processus, j'ai foiré et le script ne fonctionne même pas du tout. Je ne sais pas non plus si ce serait la meilleure méthode pour calculer cela. Donc, si vous avez une méthode plus propre pour le faire, veuillez partager. D'avance, merci.
Ce script est basé sur un script minutes / secondes que j'ai vu. Voici l'original source:
<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
Voici le script modifié que j'essaie d'inclure des jours, des heures, des minutes et des secondes.
<span id="countdown"></span>
<script>
var current_level = 93578;
function timer() {
var days = Math.round(current_level/86400);
var remainingDays = Math.round(current_level - (days * 86400));
if (days <= 0){
days = current_level;
}
var hours = Math.round(remainingDays/3600);
var remainingHours = Math.round(remainingDays - (hours * 3600));
if (hours >= 24){
hours = 23;
}
var minutes = Math.round(remainingHours/60);
var remainingMinutes = Math.round(remainingHours - (minutes * 60));
if (minutes >= 60) {
minutes = 59;
}
var seconds = Math.round(remainingMinutes/60);
document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
5 answers
Je suis finalement revenu à regarder cela et j'ai réécrit le code et cela fonctionne comme un charme.
<span id="countdown" class="timer"></span>
<script>
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
Vous pouvez utiliser ce js pour gérer efficacement la minuterie.
Personnellement, j'utiliserais l'intégration du compte à rebours jquery. Il est simple et ayant un nombre d'options à afficher dans différents formats. Comme je suis également assez nouveau sur JS, c'était le moyen le plus simple que j'ai trouvé pour obtenir un compte/minuterie.
<span id="date_regist"></span>
<script type="text/javascript">
<script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script>
var s = '2017/03/01 15:21:21';
f = '2017/03/01 15:22:00';
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';
jQuery('#date_regist').countdown(s)
.on('update.countdown', function(event) {
jQuery(this).html("<b>will be open </b>" + event.strftime(format));
})
.on('finish.countdown', function(event) {
jQuery("#date_regist").remove()
jQuery("body").append('<span id="date_regist"></span>')
jQuery("#date_regist").countdown(f)
.on('update.countdown', function(event) {
jQuery(this).html("<b> is open for </b>" + event.strftime(format));
})
.on('finish.countdown', function(event) {
jQuery('#rework').hide();
//jQuery(this).html("<b> is closed.</b>");
});
});
</script>
Voici mon exemple élaboré et testé, basé sur votre code
<span id="countdown"></span>
<script>
var current_level = 3002;
function timer() {
var days = Math.floor(current_level/86400);
var remainingDays = current_level - (days * 86400);
//if (days <= 0){
// days = current_level;
//}
var hours = Math.floor(remainingDays/3600);
var remainingHours = remainingDays - (hours * 3600);
//if (hours >= 24){
// hours = 23;
//}
var minutes = Math.floor(remainingHours/60);
var remainingMinutes = remainingHours - (minutes * 60);
//if (minutes >= 60) {
// minutes = 59;
//}
var seconds = remainingMinutes;
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;
//if (seconds == 0) {
// clearInterval(countdownTimer);
// document.getElementById('countdown').innerHTML = "Completed";
//}
current_level--;
}
var countdownTimer = setInterval(timer, 1000);
</script>