html countdown time is not stopping after specified time - html

Question

I am new to coding and preparing a download button time for my blogger blog but in the script timer doesn't stop after 10 seconds. In this script download button should be hide and display only after 10 seconds. and after click it goes on the link that is given in the page url that is working fine.
2 problem 1st one download button is not hiding before 10 seconds and counter is not stopping here below is code:
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>

Answer 1

I have got the problem. and edited the code please see.. now time is running and after completion it hide and change to another text and white running counter download button is not shown.
<script>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 = 15;
var page = getQueryVariable("pms");
var tId;
function countDown() {
time--;
$("#time").html(time);
if (time == 0) {
clearInterval(tId)
console.log("DONE");
$("#wt").html("Your Download Link is Ready");
$("#button1").show();
$("#button2").show();
$('.link-out-btn').click(function() {
window.location = page;
});
}
if (time !== 0){
$("#button1").hide();
$("#button2").hide();
}
}
function init() {
tId = setInterval(countDown, 1500);
$("#time").html(time);
$("#linkout").html(page);
$("#button1").hide();
$("#button2").hide();
}
$(document).ready(function() {
init();
});
function closeWindow() {
window.open('', '_parent', '');
window.close();
}</script>
<style>#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;
}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="wt" style="color: red; font-size: large;">
Please Wait... <span id="time" style="color: red; font-size: large;"></span> s!</span><span style="color: blue;"> </span>
<button class="link-out-btn" id="button1">DOWNLOAD</button>
<button id="button2" onclick="closeWindow();">.</button>

Answer 2

Quite a few issues.
Study the simplified code below
I am not sure what the element with id=linkout is supposed be
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>