Je suis incroyablement nouveau en Javascript et je ne le connais pas très bien. Cependant, j'ai réussi à créer un compte à rebours qui fonctionne à moitié comme je le souhaite. C'est assez simple, mais c'est essentiellement une minuterie qui compte à rebours jusqu'à une date spécifique, puis une fois qu'elle atteint la date et l'heure spécifiées, elle affiche ensuite le texte que je peux personnaliser. J'aimerais que ce code puisse afficher un bouton avec un lien hypertexte une fois que le compte à rebours atteint zéro. Voici le code que j'ai jusqu'à présent:
<p id="demo" class="countdown-live" style="text-align:center;"></p>
// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " days, " + hours + " hours, " +
minutes + " minutes, & " + seconds + " seconds";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "We're Live on Facebook!";
}
}, 1000);
Toute aide permettant d'afficher un bouton hypertexte au lieu du texte "Nous sommes en direct sur Facebook!" serait grandement apprécié.
6 Réponses :
Dans la propriété innerHTML (), vous pouvez transmettre une balise HTML comme
<a href="..."> <button> YOUR TEXT </button> </a>
innerHTML n'est pas une fonction.
Exact, c'est une propriété. Ma faute ;)
Ajoutez simplement le code HTML à la chaîne que vous définissez:
<p id="demo" class="countdown-live" style="text-align:center;"></p>
// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " days, " + hours + " hours, " +
minutes + " minutes, & " + seconds + " seconds";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = '<a href="https://facebook.com">We\'re Live on Facebook!</a>';
}
}, 1000);
Cela a très bien fonctionné. Un peu en colère contre moi-même, c'était aussi simple que ça, haha. Merci!
Vous pouvez simplement créer un élément de bouton HTML avec un lien vers la page que vous essayez de diriger. Assurez-vous de donner au bouton un ID de «démo» pour qu'il fonctionne avec votre code actuel
<button id="demo" onclick="window.location.href = 'https://www.facebook.com/';">We're live on Facebook!</button>
En html après p ajoutez un bouton et un dd une classe pour le masquer initialement
if (distance < 0) {
clearInterval(x);
document.getElementById("liveButton").classList.remove('hide')
document.getElementById("demo").innerHTML = "We're Live on Facebook!";
}
En css, ajoutez la classe hide code >
.hide{
display:none;
}
Dans js, quand j'ai atteint 0, supprimez cette classe
<p id="demo" class="countdown-live" style="text-align:center;"></p> <button id='liveButton' type='button' class='hide'>Your Text</button>
Vous devrez créer un bouton comme ceci:
document.getElementById("myButton").style.display = "inline";
Et vous pourrez ensuite l'afficher via JavaScript comme ceci:
<button id="myButton" style="display:none"><a href="example.com">Button Text</a></button>
p>
Vous pouvez essayer ceci:
document.getElementById("main").style.visibility = "hidden";
avec la propriété innerHTML, vous pouvez ajouter du HTML brut. Vous pouvez également ajouter une balise masquée, puis la rendre visible:
pour visible:
document.getElementById("yourID").style.visibility = "visible";
pour non visible:
document.getElementById("demo").innerHTML = "<a href='https://www.youUrl.com'>We're Live on Facebook!</a>";
J'espère que cela vous aidera.
Alors changez la ligne qui affiche le texte.
document.getElementById ("demo"). innerHTML = "Nous sommes en direct sur Facebook!";Je ne vois aucune tentative de votre part pour résoudre ce problème.