Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot

Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot. Hộp thoại thông báo sẽ hiện ra ngay khi bạn bị mất kết nối mạng với máy tính.
Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Chào các bạn, dạo này bỏ bê Blog quá hôm nay có chút thời gian rảnh ngồi viết một bài thủ thuật nho nhỏ. Bài này mình sẽ chia sẻ cho bạn đoạn code để chèn vào Website/Blogspot khi máy tính của bạn bị mất kết nối mạng. Code sử dụng HTML, CSS và Javascript.

Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot

Hộp thoại thông báo sẽ hiện ra ngay khi bạn bị mất kết nối mạng với máy tính của mình và sau khi khôi phục kết nối mạng một hộp thoại tiếp nữa sẽ hiện ra thông báo rằng bạn đã khôi phục kết nối mạng. Tác dụng của nó thì không nhiều nhưng mình thấy thích thì mình thêm vào tại mình thấy Facebook cũng có nên mình tò mò tìm hiểu viết ra đoạn code nhỏ giống với của Facebook. Các bạn tham khảo code bên dưới nhé!

Các bước thực hiện

Bước 1: Thêm đoạn HTML sau vào trước thẻ đóng </body>

<div id='networkstt'>
<div class='icon-stt'>
<svg class='connect-icon' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none'></path><path d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z' fill='#2ecc71'></path></svg>
<svg class='disconnect-icon' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z' fill='none'></path><path d='M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4c-1.29-1.29-2.84-2.13-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24C7.81 10.89 6.27 11.73 5 13v.01L6.99 15c1.36-1.36 3.14-2.04 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3c-1.65-1.66-4.34-1.66-6 0z'></path></svg>
</div>
<p aria-atomic='true' id='status-text' role='alert'></p>
<div class='refresh-button' role='button' tabindex='0'>
<span onclick='location.reload()'>Refresh</span>
</div>
</div>

Bước 2: Thêm CSS sau vào Blog của bạn.

.icon-stt svg{display:none}
#networkstt.online .icon-stt .connect-icon{display:inline-block}
#networkstt.offline .icon-stt .disconnect-icon{display:inline-block}
#networkstt #status-text{font-size:14px;color:#666;padding:6px}
#networkstt .icon-stt{padding:6px}
#networkstt{display:none;position:fixed;bottom:15px;left:15px;background:#fff;padding:4px 6px;align-items:center;border-radius:.25rem;box-shadow:0 0 20px rgb(95 125 149 / 25%);z-index:9999}
#networkstt.offline,#networkstt.online{display:flex}
.refresh-button{font-size:14px;display:none;color:#7577a9;margin:0 5px 0 10px;cursor:pointer}
#networkstt.offline .refresh-button{display:inline-block}

Bước 3: Cuối cùng thêm tiếp đoạn Jacascript sau vào trước thẻ đóng </body>.

<script>//<![CDATA[
window.addEventListener('load', function() {
  var status = document.getElementById("status-text"),
	  classnw = document.getElementById("networkstt");
  function updateOnlineStatus(event) {
    var networkstt = navigator.onLine ? "Your internet connection was restored." : "You are currently offline.";
    status.innerHTML = networkstt;
    if (navigator.onLine == true){classnw.className = 'online';setTimeout(function(){classnw.className = ''},3000)}else{classnw.className = 'offline'}
  }
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});
//]]></script>

Lời kết

Tác dụng của nó không nhiều thêm vào cho vui thôi nếu như bạn sợ thêm code làm trang của bạn load chậm thì đừng thêm chứ thấy nó không có tác dụng gì rồi kêu thêm vào nặng website thì có tác dụng gì đâu. Còn bạn nào có nhiều ý tưởng thì có thể tuỳ biến tuỳ theo ý tưởng nhé!

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

3 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. ๖ۣۜmiuMyu
      11/01/2021 08:56:00 SA

      Copy lun :)))))

      Trả lời Xóa
    2. Anh Trai Nắng
      7/11/2022 07:40:00 SA

      Cái chỗ hiện thị cmt e làm 1 trang hiện thị tất cả cmt đi chứ mấy cái cmt cũ ko nhớ bài nào để xem. A đặ lk luôn rồi.

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog