Hướng dẫn tạo nút download có bộ đếm thời gian

Trước khi thực hiện phải đảm bảo rằng web của bạn đã được cài đặt FontAwsome

Nếu web của bạn chưa có thì thêm đoạn code sau vào trước thẻ đóng </body>

<!--FontAwsome-->
<script type='text/javascript'> //<![CDATA[ 
//CSS 
Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>
<!--FontAwsome-->

Sau khi đã thêm xong FontAwsome các bạn thêm đoạn sau vào trước thẻ </head>

<!-- Bắt đầu Nút download có bộ đếm thời gian -->
<style type='text/css'>  
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0072b5;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#ff0000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#0072b5;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#0072b5;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px} @media screen and (max-width:640px){.batas-downx{float:none;width:100%}} @media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}} </style>
<script type='text/javascript'> //<![CDATA[ 
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> Tập tin sẵn sàng tải về trong "+l.toString()+" giây....",t.style.display="none")},1e3)} //]]> </script>
<!-- Kết thúc Nút download có bộ đếm thời gian -->

Bạn có thể thay đổi thời gian tùy ý trên mã được đánh dấu "l=10" (số 10 có nghĩa là thời gian đếm ngược là 10 giây)

Sau đó bấm vào nút "Lưu".
Để áp dụng vào bài viết bạn chuyển sang chế độ HTML trong bài viết và sử dụng đoạn code sau đây:

<div class="container">
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Tên File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" 
aria-hidden="true"></i> download</button>
<a id="downloadx" href="#linkdownload" style="display:none">
<i class="fa fa-cloud-download" aria-hidden="true"></i> download</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> QRViet</span>
 <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size : 00MB</span>
</div>
</div>
<div class="catatan-downx">
Bấm vào nút download và đợi 10s để tải về
</div>
</div>
</div>

Các bạn có thể tùy chỉnh nội dung sao cho phù hợp.
Chúc các bạn thành công!