Chào các bạn, dạo này mình khá bận nên hôm nay mình sẽ share cho các bạn Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot. 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.
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é!
Code hiển thị thông báo khi mất kết nối mạng cho Website/Blogspot
</body><b:skin>.</body>.<div id='networkstt'>
<div class='icon-stt'>
<svg class='connect-icon' height='24' viewBox='0 0 24 24' width='24' xmlns='https://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='https://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>
.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}
<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>
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 nên thêm vì mình thấy nó không có tác dụng gì. Còn bạn nào có nhiều ý tưởng thì có thể tuỳ biến tuỳ theo ý tưởng nhé!
Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...
