Computer >> Máy Tính >  >> Lập trình >> HTML

Phương thức btoa () Cửa sổ HTML

Phương thức btoa () của cửa sổ HTML mã hóa một chuỗi dữ liệu trong chuỗi base-64 có thể được giải mã bằng phương thức atob () trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

window.btoa(string_to_be_encoded);

Hãy để chúng tôi xem một ví dụ về phương thức btoa () của cửa sổ HTML -

Ví dụ

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   ::placeholder {
      color: #000;
   }
</style>
<body>
<h1>HTML Window atob()/btoa() Method</h1>
<textarea placeholder="Enter your message here" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">Encode Message</button>
<button onclick="decode()" class="btn">Decode Message</button>
<div class="show"></div>
<script>
   var show = document.querySelector(".show");
      function encode() {
         var encMsg = window.btoa(document.querySelector("textarea").value);
         show.innerHTML = encMsg;
   }
   function decode() {
      var decMsg = window.atob(window.btoa(document.querySelector("textarea").value));
      show.innerHTML = decMsg;
   }
</script>
</body>
</html>

Đầu ra

Phương thức btoa () Cửa sổ HTML

Nhập tin nhắn vào vùng văn bản màu trắng, sau đó nhấp vào nút “Mã hóa tin nhắn” để hiển thị tin nhắn được mã hóa bằng phương thức btoa ().

Phương thức btoa () Cửa sổ HTML

Sau đó nhấp vào nút “Giải mã thông báo” để hiển thị thông báo đã giải mã bằng phương thức atob ().

Phương thức btoa () Cửa sổ HTML