文章是本人在B站学习“黑马前端”的笔记,感谢pink老师的详细讲解。
1.创建一个html文件。
2.在body中写入一个<p>标签
<p class="tips"></p>
3.引入jquery.min.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
4.HTNL5提供了两个事件online 和 offline
online用户网络连接时调用
offline用户网络断开时调用
他们的监听对象都是window
写入代码:
<script>
// 1.当网络连接的时候,弹出P标签,然后消失
window.addEventListener('online',function(){
$(".tips").text("网络已经连接").fadeIn(500).delay(1000).fadeOut(500);
})
// 1.当网络断开的时候,弹出P标签,然后消失
window.addEventListener('offline',function(){
$(".tips").text("裂开,网络链接失败").fadeIn(500).delay(1000).fadeOut(500);
})
</script>
5.打开网页,连接或断开网络,验证运行是否成功。
完整代码