Code button nhấn vào đếm ngược thời gian xong hiện ra pass

Code button Click đếm ngược để lấy mật khẩu giải nén – Thường thấy nhiều bạn cần tìm kiếm thông tin về chủ đề này, tuy nhiên trên internet thường không hiển thị kết quả như mong muốn. Trong bài viết này, Chungcuhanoivip.net sẽ cung cấp một số code về mã đếm ngược thời gian để hiển thị mật khẩu giải nén nhé!

==>> Xem thêm Code button click đếm ngược lấy Pass – Demo: khaison.city

Bước 1: Chuẩn bị đoạn nội dung html

<div class="matkhaugiainen">
    <input id="laypass" class="laymk" type="button" value="Lấy Pass giải nén"><br>
    <span id="hienpass" class="doimk hienmk">Đợi xem Pass</span>
</div>

Bước 2: Chuẩn bị đoạn JavaScript

<script>
        jQuery(document).ready(function ($) {    
             function toancr(min, max){
                return Math.floor(Math.random() * (max - min)) + min;
            }
            var timeout = null;
              var s = toancr (65, 85); //55, 75
            
            function demnguoc(){
                $("#laypass").addClass("nhanvao"); 
                $("#hienpass").addClass("hienmatkhau");            
                $("#hienpass").html(s);            
                if (s == -1){
                    clearTimeout(timeout);
                    $("#hienpass").html("Pass giải nén: toancr.com");
                    return false;
                }
                timeout = setTimeout(function(){
                    s--;
                    demnguoc();
                }, 1000); 
            }
            $(document).on("click", "#laypass", function(){

                demnguoc();
            });
        });
        </script>

Bước 3: Tùy chỉnh Thêm 1 số CSS cho đẹp mắt

.laymk, .hienmk {
    background: red !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 5px !important;
}
          
.doimk {display: none;}
          
.hienmatkhau {display: inline-block !important;}
          
.matkhaugiainen .nhanvao {display: none !important;}

Code button Click đếm ngược lấy mã giải nén {Update code mới}

<div id="dem-nguoc"><button>NHẬN MÃ KHUYẾN MÃI</button></div>
<script>
    var downloadButton = document.getElementById("dem-nguoc");
    var counter = 8;
        downloadButton.onclick = function(){
          setInterval(function() {
          counter--;

          if (counter < 0) {
              downloadButton.innerText = "126888"

              } else {
              downloadButton.innerText = "Đang tải... (" + counter.toString() + ")";
          }
      }, 1000);
    }
</script>

Giải thích & cách dùng: Copy đoạn code trên vào vị trí mà bạn muốn user click

• Thay đổi chữ nhận mã khuyến mãi thành nội dung mà bạn muốn. Ví dụ: Lấy mã, lấy pass, nhận code,…
• Var counter = 8 là số giây đếm ngược, ví dụ mình đang để 8 nghĩa là 8s đếm ngược
• 126888 là mã code hiển thị cho người dùng copy

Code button nhấn vào đếm ngược thời gian xong hiện ra pass

Đây là mẫu Code javascript đếm ngược lấy Pass giải nén có nút button copy tiện lợi cho người dùng. Mẫu này tương thích nhiều mã nguồn cho moij người tha hồ sử dụng luôn nhé!

<div class="laymaso" style="text-align: center;">
    <button id="layma" onclick="maxacnhan()" style=" background: red; color: white; border-radius: 30px; ">Lấy mã xác nhận</button>
    <div id="masola" onclick="copyText()"></div>
    <script>
        function maxacnhan() {
            let time = 10 // tính bằng giây;
            var countdown = setInterval(function() {
                time--;
                document.getElementById("layma").innerHTML = time;
                if (time == 0) {
                    document.getElementById("masola").innerHTML = "<button style='background: red; color: white; border-radius: 30px; margin-top: 20px;'>Copy mã: 8686</button><style>#layma{display:none;}#masola{color: red; font-size: 30px; font-weight: bold;}</style>"; // pass
                    clearInterval(countdown);
                }
            }, 1000);
        }
    </script>

      
    <script>
        function copyText() {
            /* Copy text into clipboard */
            navigator.clipboard.writeText
                ("28686");
        }
    </script>
</div>

Giải thích & cách dùng: Copy đoạn code trên vào vị trí mà bạn muốn user click

• Thay đổi chữ Lấy mã xác nhận thành nội dung khác theo nhu cầu của bạn nhé.
• let time = 10 => 10 ở đây được tính bằng giây đếm ngược. Bạn có thể thay đổi số giây theo mong muốn.
• Copy mã: 28686 => 28686 là mã xác nhận hiển thị cho user. Tuy nhiên ở đoạn code trên mình có thêm 1 đoạn javascript bấm vào copy luôn nên anh em cần thay đổi 2 vị trí => 28686 nhé!

Cần nói thêm, vì mình dùng WordPress nên hướng dẫn này + hình ảnh đi kèm là WordPress, tuy nhiên mã trên dùng cho mọi nền tảng vì chỉ là HTML + JS. Hướng dẫn mình đã cố gắng cho đơn giản và dễ hiểu nhất có thể để tất cả đều làm được. khi thêm Code button nhấn vào đếm ngược thời gian xong hiện ra pass

OK, bài viết đã kết thúc. Hy vọng những thông tin này sẽ có ích cho bạn. Chúc các bạn làm thành công!

Nguồn: chungcuhanoivip.net