Day-1-网络状态

最新推荐文章于 2024-05-27 20:45:00 发布

铭心NTeen

最新推荐文章于 2024-05-27 20:45:00 发布

阅读量120

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_25238675/article/details/103154124

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网络状态

HTML5提供两个事件来检测网络状态这两个事件检测的都是window对象

online	网络连接时
offline	网络断开时

实例代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tips{
            display: none;
            width:200px;
            height:50px;
            margin:100px auto;
            text-align:center;
            line-height:50px;
            background-color: rgba(0,0,0,.5);
            color:#fff;
        }
    </style>
</head>
<body>
<div id="tips"></div>
<script src="./jq.js"></script>
<script>
    //用了JQuery框架写的
    $(document).ready(function(){
        window.addEventListener('online',function(){
            console.log('执行')
            //tips淡入  2000ms 之后淡出
            $('#tips').text('恭喜你，网络已重连').fadeIn().delay(2000).fadeOut()
        })

        window.addEventListener('offline',function(){
            //tips淡入  2000ms 之后淡出
            $('#tips').text('对不住了，网络已断开').fadeIn().delay(2000).fadeOut()
        })

    })
</script>
</body>
</html>