Is it possible to create a button with a 10-second timer without using the onclick function? I want the button to start a countdown when clicked and after the countdown is complete, redirect to the URL specified in the href attribute. You can test this functionality by visiting this link.
var l = 0; function myFunction2(url1) {var tt1 = setInterval(function() {
l = l + 1; var counter = 10 - l;
button2.innerHTML = 'You will be redirected After:' + counter;
if (counter === 0) { clearInterval(tt1); window.location = url1; }
}, 1000);}; var i = 0;
function myFunction(url) { var tt = setInterval(function() {
i = i + 1; var counter = 10 - i;
button1.innerHTML = 'You will be redirected After' + counter;
if (counter === 0) { clearInterval(tt); window.location = url; }
}, 1000);};
#button2{padding: 10px;
border:3px solid #eee;
background: #27ae60;
border-radius: 15px;
width: 120px;
cursor: pointer;
}
#download2{text-decoration: none;
font-size: 18px;text-align: center;
color:#ffffff; }
#button1{
text-decoration: none;
padding: 10px;
border:3px solid #eee;
background:#2573a6;
border-radius: 15px;
width: 120px;
cursor: pointer;
}#download1{
text-decoration: none;
font-size: 18px;
text-align: center;
color:#ffffff;
}
<div class="pr3" id="second">
<button id="button1">
<a href="#" id="download1" onclick="myFunction('https://google.com')">Download</a>
</button>
<button id="button2">
<a href="#" id="download2" onclick="myFunction2('https://google.com.pk')">DEMO</a>
</button><br />