我有一个有效的Javascript,其目的是隐藏XYZ时段的链接/按钮。
使用Javascript:
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").style.visibility = "visible";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showNextButton()", 30000);
</script>
HTML:
<div id="nextbutton" style="visibility: hidden">
<a href="nextpage.html">Continue</a>
</div>
该脚本效果很好,但我想知道在30秒后出现主按钮之前如何显示已禁用的链接/按钮。
例如按钮:(这是一个禁用的无用按钮,只是让访问者知道他们必须等待30秒才能继续。) [禁用30秒]
然后三十秒过去,但取而代之的是: [继续]
有人可以告诉我我要修改这个脚本来做这件事吗?
谢谢,
答案 0 :(得分:1)
<强>描述强>
此代码将从30倒计时到0,然后切换到继续链接。你可以改变它或者要求别的东西。
<强> HTML 强>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="wait" style="display: block">
<a id='countdown-link'>30 seconds</a>
</div>
<div id="nextbutton" style="display: none">
<a href="nextpage.html">Continue</a>
</div>
</body>
</html>
<强> JS 强>
//29 because we have already waited 1 second before
var counter = 29;
//function that gets called every second
function showNextButton() {
//if we are at 0 it has been 30 seconds
if(counter == 0)
{
//show the continue link
document.getElementById("nextbutton").style.display = "block";
//hide the wait text
document.getElementById("wait").style.display = "none";
//disable the timer so we don't keep calling this function after 30 seconds
clearInterval(myTimer);
}
else
{
//every second change the text
document.getElementById("countdown-link").innerHTML = counter + ' seconds';
//lower the timer counter by 1 since it has been 1 second
counter--;
}
}
//setup timer to call showNextButton every 1 second
var myTimer = setInterval("showNextButton()",1000);
验证浏览器
<强> HTML 强>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input id='next-button' type='button' disabled onclick="window.location='nextpage.html'" value='30 seconds'/>
</body>
</html>
<强> JS 强>
var counter = 29;
function showNextButton() {
if(counter == 0)
{
document.getElementById("next-button").disabled = false;
document.getElementById("next-button").value = 'Continue';
clearInterval(myTimer);
}
else
{
document.getElementById("next-button").value = counter + ' seconds';
counter--;
}
}
var myTimer = setInterval("showNextButton()",1000);
答案 1 :(得分:0)
隐藏下一个按钮时使另一个元素可见,然后在启用下一个按钮时隐藏它。
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").style.visibility = "visible";
document.getElementById("disabledbutton").style.visibility = "hidden";
}
document.getElementById("disabledbutton").style.visibility = "visible";
// adjust this as needed, 1 sec = 1000
setTimeout("showNextButton()", 30000);
</script>
答案 2 :(得分:0)
<button href="11.html" id="nextbutton" disabled>Disabled for 30 seconds</button>
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").disabled = false;
document.getElementById("nextbutton").innerHTML = "Continue";
}
// adjust this as needed, 1 sec = 1000
setTimeout(function(){showNextButton()},30000);
</script>