我不熟悉为博客博客编写代码并为其准备下载按钮的时间,但是在脚本中,计时器不会在10秒后停止。在此脚本中,下载按钮应仅在10秒后隐藏并显示。单击后,它会进入正常工作的页面网址中提供的链接。
第2个问题,第一个下载按钮在10秒内未隐藏,并且计数器未在此处停止,以下为代码:
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
var time = 10;
var page = getQueryVariable("pms");
function countDown() {
time--;
gett("timecount").innerHTML = time;
if (time == 0) {
}
}
function gett(id) {
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all.id;
if (document.layers) return document.layers.id;
if (window.opera) return window.opera.id;
}
function init() {
if (gett('timecount')) {
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
} else {
setTimeout(init, 10);
}
}
document.onload = init();
$(document).ready(function() {
$('.link-out-btn').click(function() {
window.location = page;
});
$('#linkout').text(page);
});
function closeWindow() {
window.open('', '_parent', '');
window.close();
}
#button1 {
background-color: Blue;
border: none;
border-radius: 4px;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
}
#button2 {
background-color: white;
border: none;
border-radius: 4px;
color: white;
padding: 7px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
}
.footer-credits {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: blue;"><span style="background-color: white; color: black; font-size: 16px; white-space: pre-wrap;"></span><b> </b></span><span style="color: blue;"><b><span style="color: red; font-size: large;"> PLEASE WAITING...
</span><span id="timecount" style="color: red; font-size: large;"></span><span style="color: red; font-size: large;"> s</span><span style="color: blue;">! </span></b>
</span><br/>
<button class="link-out-btn" id="button1">DOWNLOAD</button>
<button id="button2" onclick="javascript:closeWindow();">.</button>
相当几个问题。
研究下面的简化代码
我不确定id = linkout的元素应该是什么
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return "";
}
var time = 10;
var page = getQueryVariable("pms") || "not passed";
var tId;
function countDown() {
time--;
$("#time").html(time);
if (time == 0) {
clearInterval(tId)
console.log("DONE");
$('.link-out-btn').click(function() {
window.location = page;
});
}
}
function init() {
tId = setInterval(countDown, 1000);
$("#time").html(time);
$("#linkout").html(page);
}
$(document).ready(function() {
init();
});
function closeWindow() {
window.open('', '_parent', '');
window.close();
}
#button1 {
background-color: Blue;
border: none;
border-radius: 4px;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
}
#button2 {
background-color: white;
border: none;
border-radius: 4px;
color: white;
padding: 7px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
}
.footer-credits {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="color: red; font-size: large;"> PLEASE WAIT...
<span id="time" style="color: red; font-size: large;"></span>s
<span style="color: blue;">! </span>
<button class="link-out-btn" id="button1">DOWNLOAD</button> page: <span id="linkout"></span>
<button id="button2" onclick="closeWindow();">.</button>
</p>