Tuesday, December 22, 2020

Download Chia sẻ code HTML và JAVASCRIPT đếm giây chờ hiện link tải kết hợp css cực đẹp

Download Chia sẻ code HTML và JAVASCRIPT đếm giây chờ hiện link tải kết hợp css cực đẹp

- Hôm nay mình sẽ chia sẻ cho anh em một code html get link đếm thời gian hiện link cho anh em nha! Thích hợp đối với một số anh em làm blog về phần mềm và ứng dụng nha- Chào Mừng Tất Cả Mọi Người Nha!
- Nó sẽ trông như thế nào??? Có đẹp và gây khó chịu cho người dùng không??
Nó sẽ trông như thế này nha:
- Khi người dùng ấn vào download á thì nó sẽ nổi đồn hồ thời gian lên anh em có thể tùy chỉnh thời gian chờ bao lâu cũng được lun!
- Ở Đây mình đặt 9s nha sau khi đếm hết 9s á thì nó sẽ nổi link tải file lun nha mọi người. Nhìn giao diện cực đẹp không y như l.i.n.k.1.s lun nha. Sau khi hết thời gian nó sẽ như vầy:
- Bây giờ người dùng chỉ việc ấn vào là tải thôi cực khì đơn giản đúng hong! Không cần xác minh capcha hay gì lun quá là đơn giản!
- Thôi không dài dòng nữa nha bây giờ mình sẽ hướng dẫn mọi người cách để làm lun nha:
+ Đầu tiên anh em coppy dòng code HTML này cho vào vị trí anh em muốn đặt Link tải:
---------------------
<div class="khung">
<br/>
 <center class="btn" id="link1" style="display: none;"> 
                <a class="download" href="https://www.modgamemobile.top" target="_blank" rel="nofollow">Nhấn Để Tải</a> 
               </center> 
               <div style="clear: both;"></div> 
               <center class="kv-unlock" id="kv-unlock"> 
                <div class="text-dl">
                 LINK TẢI FILE SIÊU NHANH
                </div> 
                <div style="color: #4caf50; font-size: 12px;">
                 <i class="fa fa-check-circle"></i> Nếu link tải bị lỗi hãy liên hệ với tôi qua zalo
                </div> 
                <div id="kv-unl"> 
                 <button class="download" id="getlink1" onclick="generate()">DOWNLOAD</button> 
                </div> 
               </center> 
               <script> 
// countdown
var window_focus = true;
  document.addEventListener('visibilitychange', function() {
    if(document.visibilityState == 'visible')
     window_focus = true;
    else
      window_focus = false;
  });

function generate() {
    
    var kvDL = document.getElementById("link1"),
        kvunlock = document.getElementById("kv-unlock"),
        nutGET = document.getElementById("getlink1"),
        counter = 15;
    var newElement = document.createElement("time-counter");
    kvDL.parentNode.replaceChild(newElement, kvDL);
    
    var id;
    id = setInterval(function() {
 if(window_focus) 
 {
        counter--;
 }
        if (counter < 0) {

            newElement.parentNode.replaceChild(kvDL, newElement);
            clearInterval(id);
            kvunlock.style.display = "none";
            kvDL.style.display = "inherit";
        } else {
          newElement.innerHTML = "<center style='font-family: Roboto Condensed; font-weight: 600; font-size:14px; color: #3b5998;border: 1px solid #f3f4f5;max-width: 400px;background: #f3f3f3;margin: auto;'>VUI LÒNG CHỜ TRONG<br/>  <div class='tron'> <br/><strong style='color: #ed1c24;' text-align='center';>" + counter.toString() + " GIÂY</strong></div><br/>ADMIN ĐANG ĐANG LẤY LINK CHO BẠN</center>";
            kvunlock.style.display = "none";
        }
    }, 1000);
}
  
</script><br/>
              </div> 
--------------------------
- Phần mình in đậm bằng màu đỏ á thì mọi người có thể chỉnh tùy ý nha!
Bây giờ mọi người thêm css vào nữa là xong nha. Sau đây là code css nha mọi người!
---------------------
.tron {
    width: 100px;
    height: 100px;
color:#000000;
font-size:22px;
    display: inline-block;
    border: 6px solid #1E73BE;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  text-align: center;
  }
.khung{
margin:0 0 15px;
clear:both;border: 3px solid #f56d5b;
border-radius: 10px 10px 10px 10px;;
padding: 8px 2px;

------------------------------
- Mọi người chỉ cần thêm vào phần body là được nha như vậy là xong rồi á chúc mọi người thành công nhé!
VPN Master
MrEzPro_B3stMod
OBB25

0 Post a Comment: