h5新知识

旧城等待， 2021-11-11 00:26 227阅读 0赞

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>01-检测网络状态</title>
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <style>
     8         html{
     9             font-size: 10px;
    10         }
    11         body{
    12             font-size: 1.2rem;
    13         }
    14         #net{
    15             width: 20rem;
    16             height: 4rem;
    17             line-height: 4rem;
    18             background-color: #e0e0e0;
    19             border-radius: 0.5rem;
    20             text-align: center;
    21             font-size: 1.8rem;
    22             color: red;
    23             display: none;
    24         }
    25     </style>
    26 </head>
    27 <body>
    28     <button id="btn">获取网络的状态</button>
    29     <div id="net">xxdewdwedwe</div>
    30     <p>哈哈哈哈</p>
    31 <script src="js/jquery-3.3.1.js"></script>
    32 <script>
    33     $(function () {
    34          $('#btn').on('click', ()=>{
    35             //   alert(window.navigator.onLine);
    36          });
    37         // 1. 当网络连接的时候
    38         window.addEventListener('online', ()=>{
    39             $('#net').text('网络已经连接~').fadeIn(500).delay(1000).fadeOut();
    40         });
    41 
    42         // 2. 当网络断开的时候
    43         window.addEventListener('offline', ()=>{
    44             $('#net').text('您的网络出了些问题哟~').fadeIn(500).delay(1000).fadeOut();
    45         });
    46     });
    47 </script>
    48 </body>
    49 </html>

转载于:https://www.cnblogs.com/zhangzhengyang/p/11259118.html

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5新特性

. 绘画canvas 2. 媒介回放video和audio 3. 本地存储 localStoreage ,sessionStorage > 请描述一下 cooki...

梦里梦外;/ 2024年04月17日 19:15/ 0 赞/ 35 阅读

相关 H5新特征-新的语义标签

H5新特征何为语义标签语义标签 -> 标签可以看出其作用例如 img table form 新的标签新的标签包括: <table> <the

系统管理员/ 2023年10月10日 15:58/ 0 赞/ 28 阅读

相关 H5系列之新input

虽说H5 新填了几个很方便的input 类型，但是吧，想法是美好的，但是现实很残酷，兼容性不太好。基本只有google浏览器能用。但是既然出了，那么就要了解他，知道有这么一个东

朱雀/ 2023年08月17日 15:23/ 0 赞/ 83 阅读

相关 H5知识 -- 表单篇

W3C对于HTML表单的解释是“用于搜集不同类型的用户输入” HTML表单的定义使用<form>标签，表单包含一种或者多种表单类型，比如单选框，多选框，提交按钮等，你还可以使

亦凉/ 2022年07月14日 11:39/ 0 赞/ 207 阅读

相关 H5知识 -- meta篇

H5知识 – meta篇转载请注明出处 LXJ 网站开发常用<meta> <meta>标签提供了HTML文档的元数据（数据的信息）。元数据不会显示在客户端中，但会

梦里梦外;/ 2022年07月14日 06:55/ 0 赞/ 221 阅读

相关 H5新特性

1、用于绘画的canvas标签 2、用于媒介回放的video和audio元素 3、对本地离线储存的更好支持（sessionStorage和localStorage） 4、

蔚落/ 2022年07月11日 19:59/ 0 赞/ 201 阅读

相关 form表单基础知识，以及H5新属性总结

HTML中的表单用于搜集不同类型的用户输入；所有的HTML表单元素都可以划分成两类 1：输入类表单 2：非输入类表单下边将总结每一个表单元素的使用一：for

梦里梦外;/ 2022年05月18日 02:24/ 0 赞/ 228 阅读

相关 H5知识点

1.什么是HTML5 HTML5是HTML的最新标准，他的主要没目标是提供全部内容而不需要想flash，silverlight等额外的插件，这些内容来自于视频，动画，富GU

今天药忘吃喽~/ 2022年05月09日 14:14/ 0 赞/ 235 阅读

相关 H5的新特性、新标签

新特性 1.video / radio 视频/音频 2.canvas 绘画 3.geolocation 定位 4.WebSocket 前后端双向通讯 5.l

古城微笑少年丶/ 2022年03月31日 07:26/ 0 赞/ 213 阅读

相关 h5新知识

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

旧城等待，/ 2021年11月11日 00:26/ 0 赞/ 228 阅读