You maybe see a download page with counter/timer within a range that displays the seconds remaining (count down) before prompting a downloadable file via it’s URL. For example: our download page or SourceForge download page.
This article will give you an idea in order to create a download page with a counter/timer. Meaning user have to wait for few seconds (8 seconds, for example) before downloading the desired file.
JavaScript – Create Count Down Download Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Count Down Download Page With JavaScript</title> <script type="text/javascript"> //Count to 8 seconds var c = 8; window.onload = function(){ countDown(); //Execute the method } function countDown() { c -= 1; if(c>=0) { document.getElementById("timer").innerHTML = " in " + c + " seconds"; } else { document.getElementById("timer").innerHTML = "Now"; download(); return; } var counter2 = setTimeout("countDown()",1000); return; } function download(){ var ele = document.createElement('iframe'); ele.src = "http://4rapiddev.com/wp-content/plugins/download-monitor/download.php?id=php-manage-session.zip"; ele.style.display = "none"; document.body.appendChild(ele); } </script> </head> <body> <div style="margin-left:20px;"> <h2>Thanks for trying our page!</h2><br /> <h3>An downloadable will be started <span id="timer"></span>.</h3> </div> <div style="margin-left:20px; margin-top:20px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at egestas turpis. Proin tincidunt, velit nec scelerisque tincidunt, est erat aliquet leo, vitae faucibus urna sem nec enim. Proin quis commodo nunc. Curabitur condimentum, lacus nec aliquam imperdiet, dui est vestibulum justo, quis pellentesque arcu leo vitae leo. Sed vel volutpat mauris. Proin sodales, enim vitae mollis sagittis, ipsum leo tempor leo, et commodo dolor orci sit amet est. Cras vulputate, mi quis interdum placerat, lectus orci egestas odio, eget tincidunt turpis nisi congue risus. Quisque molestie accumsan aliquam. Aliquam non magna tellus, eu accumsan justo. Vestibulum bibendum tincidunt enim, vitae euismod est adipiscing a. Praesent placerat tincidunt placerat.</p> </div> </body> </html> |
View demo & [download id=”15″ format=”1″]
