将按钮添加到 Javascript 倒计时
Adding a Button to a Javascript Countdown
我是 Javascript 的新手,对它不是很了解。但是,我已经设法创建了一个倒数计时器,它可以像我想要的那样半工作。它非常简单,但它基本上是一个倒计时到特定日期的计时器,一旦达到指定的日期和时间,它就会显示我可以自定义的文本。
我希望这段代码能够在倒计时达到零时显示带有超链接的按钮。这是我到目前为止的代码:
// 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);
<p id="demo" class="countdown-live" style="text-align:center;"></p>
任何帮助让它显示超链接按钮而不是文本的人都将不胜感激"We're Live On Facebook!"。
在内部HTML() 属性 你可以传递一个 HTML 标签,比如
<a href="...">
<button> YOUR TEXT </button>
</a>
只需将 HTML 添加到您要设置的字符串中:
// 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);
<p id="demo" class="countdown-live" style="text-align:center;"></p>
您可以只创建一个带有 link 的 HTML 按钮元素到您要指向的页面。确保为按钮提供 'demo' 的 ID,以便它可以与您当前的代码一起使用
<button id="demo" onclick="window.location.href = 'https://www.facebook.com/';">We're live on Facebook!</button>
在 html 中 p
之后添加一个按钮并向其添加一个 class 以初始隐藏它
<p id="demo" class="countdown-live" style="text-align:center;"></p>
<button id='liveButton' type='button' class='hide'>Your Text</button>
在css中添加classhide
.hide{
display:none;
}
在 js 中,当我达到 0 时删除 class
if (distance < 0) {
clearInterval(x);
document.getElementById("liveButton").classList.remove('hide')
document.getElementById("demo").innerHTML = "We're Live on Facebook!";
}
您需要像这样创建一个按钮:
<button id="myButton" style="display:none"><a href="example.com">Button Text</a></button>
然后你可以像这样通过JavaScript显示它:
document.getElementById("myButton").style.display = "inline";
你可以试试这个:
document.getElementById("demo").innerHTML = "<a href='https://www.youUrl.com'>We're Live on Facebook!</a>";
with innerHTML 属性 你可以添加 raw HTML。您还可以添加隐藏标签,然后使其可见:
可见:
document.getElementById("yourID").style.visibility = "visible";
不可见:
document.getElementById("main").style.visibility = "hidden";
希望对你有所帮助。
我是 Javascript 的新手,对它不是很了解。但是,我已经设法创建了一个倒数计时器,它可以像我想要的那样半工作。它非常简单,但它基本上是一个倒计时到特定日期的计时器,一旦达到指定的日期和时间,它就会显示我可以自定义的文本。 我希望这段代码能够在倒计时达到零时显示带有超链接的按钮。这是我到目前为止的代码:
// 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);
<p id="demo" class="countdown-live" style="text-align:center;"></p>
任何帮助让它显示超链接按钮而不是文本的人都将不胜感激"We're Live On Facebook!"。
在内部HTML() 属性 你可以传递一个 HTML 标签,比如
<a href="...">
<button> YOUR TEXT </button>
</a>
只需将 HTML 添加到您要设置的字符串中:
// 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);
<p id="demo" class="countdown-live" style="text-align:center;"></p>
您可以只创建一个带有 link 的 HTML 按钮元素到您要指向的页面。确保为按钮提供 'demo' 的 ID,以便它可以与您当前的代码一起使用
<button id="demo" onclick="window.location.href = 'https://www.facebook.com/';">We're live on Facebook!</button>
在 html 中 p
之后添加一个按钮并向其添加一个 class 以初始隐藏它
<p id="demo" class="countdown-live" style="text-align:center;"></p>
<button id='liveButton' type='button' class='hide'>Your Text</button>
在css中添加classhide
.hide{
display:none;
}
在 js 中,当我达到 0 时删除 class
if (distance < 0) {
clearInterval(x);
document.getElementById("liveButton").classList.remove('hide')
document.getElementById("demo").innerHTML = "We're Live on Facebook!";
}
您需要像这样创建一个按钮:
<button id="myButton" style="display:none"><a href="example.com">Button Text</a></button>
然后你可以像这样通过JavaScript显示它:
document.getElementById("myButton").style.display = "inline";
你可以试试这个:
document.getElementById("demo").innerHTML = "<a href='https://www.youUrl.com'>We're Live on Facebook!</a>";
with innerHTML 属性 你可以添加 raw HTML。您还可以添加隐藏标签,然后使其可见:
可见:
document.getElementById("yourID").style.visibility = "visible";
不可见:
document.getElementById("main").style.visibility = "hidden";
希望对你有所帮助。