jQuery-判断联网

最新推荐文章于 2025-06-10 21:27:03 发布

陌路晚风辞

最新推荐文章于 2025-06-10 21:27:03 发布

阅读量454

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/qq_49246775/article/details/121640662

版权

网络是信息传输、接收、共享的虚拟平台，它把信息联系到一起，从而实现资源的共享。它是人们信息交流使用的一个工具，他最主要的功能或者说作用就是传播！那为什么要联网呢？首先因为网络把信息联系到一起我们从而可以学习、浏览各个地方的事情、放松、下载各种软件！

那什么是判断联网？

判断是否联网就相当于你进入学校门卫问你是这个学校的学生不。必须要回答是与不是，如果是就进去，不是就进不去。判断联网就像是门卫。

不说废话了，先看一下效果图、再看实现思路，最后再看代码。

效果图：

这里运用一个百度搜索的的案例

无联网状态：无联网状态下，无法跳转且提示没有联网。

联网状态：联网状态下，正常跳转。

实现思路：

HTML部分需要一个文本框和一个button按钮，button按钮用于提示，文本框用于接收输入的要搜素的内容。

无css样式

jQ部分需要用到一个键盘监听事件(keydown)。

准备工作：创建一个是否联网的方法(function)

1.声明返回值

2.navigator.onLine判断是否联网。

navigator.onLine为true联网navigator.onLine为false没联网

3.返回返回值

第一步：获取文本框的value值。

第二步：用if来判断是否按下回车（回车键盘值为13）

第三步：嵌套if调用是否联网的方法

如果等于true进行跳转并搜索，如果等于false无法跳转并提示无法跳转。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索链接百度</title>
    <script src="../js/jquery-1.12.4.js"></script><!--JQ引入注意路径-->
</head>
<body>
    <div>
        <input type="search" class="btn" placeholder="请输入你要查询的问题">
        <button>按回车百度搜索</button>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("input").keydown(function (event) {
            var searchVal = $(this).val();
            if (event.keyCode === 13){
                if(IsConnection()===true){
                    window.open("https://www.baidu.com/s?ie=utf-8&wd="+searchVal);
                }else{
                    alert("请连接网络！！！");
                }
            }
            //是否联网的方法
            function IsConnection() {
                var isNotCon;//返回值
                //navigator.onLine 判断是否联网
                if (navigator.onLine===true){
                    isNotCon = true;
                }else{
                    isNotCon = false;
                }
                return isNotCon;
            }
        });
    })
</script>
</html>