Hello ae dạo này tôi cũng hơi bận nên bỏ bê blog này quá đi =))).Bài này tôi sẽ chia sẻ cho ae đoạn code để chèn vào Website/Blogspot khi máy tính của ace 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 tôi thấy Facebook cũng có nên tôi tò mò tìm hiểu viết ra đoạn code nhỏ giống với của Facebook. Anh chị em tham khảo code bên dưới nhé!
Các bước thực hiện
Bước 1 : Thêm đoạn code sau vào trước thẻ <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 : Bước cuối cùng thêm đoạn code sau vào 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é!
