测定网速

navigator.connection.downlink是一个用于表示当前连接下行速度的属性，它是 JavaScript 的Network Information API的一部分。此属性返回一个数值，单位为Mbps（Megabits per second），表示网络的下行带宽。

例如，你可以通过以下方式使用它：

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前下行速度为: ${downlink} Mbps`);
} else {
    console.log("当前浏览器不支持Network Information API");
}

需要注意的是，Network Information API并不是所有浏览器都支持，因此在使用时最好进行兼容性检查。

在智能手机上启用振动

window.navigator.vibrate是一个用于触发设备震动的 Web API，通常用于移动设备上。这个方法允许开发者控制设备的震动模式，它接受一个数字或一个数组作为参数。

  • 如果传入一个数字，这个数字表示震动的时长（以毫秒为单位）。
  • 如果传入一个数组，可以定义震动和静止的模式，例如[200, 100, 200]表示震动200毫秒，静止100毫秒，再震动200毫秒。

以下是一个简单的示例：

// 使设备震动 500 毫秒
if (navigator.vibrate) {
    navigator.vibrate(500);
} else {
    console.log("当前浏览器不支持震动 API");
}

// 使用数组来创建震动模式
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}

请注意，并不是所有的设备和浏览器都支持震动 API，因此在使用时最好确认设备的兼容性。

禁止插入文字

你可能不希望用户在输入字段中粘贴从其他地方复制的文本（请仔细考虑清楚是否真的要这样做）。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。

<input type="text"></input>
<script>
    const input = document.querySelector('input');
    input.addEventListener("paste", function(e){
        e.preventDefault()
    })
</script>

好了，现在你无法复制粘贴，必须得手动编写和输入所有的内容了

快速隐藏dom

有时候我们需要隐藏一个元素，但是又不想通过display: none或者visibility: hidden来隐藏，因为这样会导致元素脱离文档流，影响布局。这时可以使用hidden属性，它可以隐藏元素但不会影响布局。

<div hidden>这是一个隐藏的div</div>

这个属性是一个布尔属性，如果设置为true，元素将被隐藏，如果设置为false，元素将显示出来。

快速使用定位

你知道CSS的inset属性吗？这是我们所熟悉的top，left，right和bottom的缩写版本。通过类比短语法margin或属性padding，只要一行代码就可以设置元素的所有偏移量。

/* 普通写法 */
div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* inset写法 */
div {
    position: absolute;
    inset: 0;
}

使用简短的语法可以大大减小CSS文件的体积，这样代码看起来更干净。但是，可别忘了inset是一个布尔属性，它考虑了内容排版方向。换句话说，如果站点使用的是具有rtl方向（从右到左）的语言，那么left要变成right，反之亦然。

你不知道的Console的用法

通常我们用的最多的console.log(xxx)，其实在 JavaScript 中，console对象提供了一些很有用的方法用于调试和查看信息。以下是一些可能不太常见的console用法：

  1. console.table() : 可以用来以表格的格式输出数组或对象，非常适合查看数据结构。
    const data = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ];
    console.table(data);
  2. console.group() 和 console.groupEnd() : 可以将相关日志信息分组，方便查看和组织输出。
    console.group('Group Label');
    console.log('这是一条 log');
    console.log('这是一条 log 2');
    console.groupEnd();
  3. console.time() 和 console.timeEnd() : 用于测量代码块的执行时间。
    console.time('myTimer');
    // 执行一些操作
    console.timeEnd('myTimer'); // 输出所用的时间
  4. console.error() 和 console.warn() : 用于输出错误和警告信息，通常会以不同的颜色高亮显示。
    console.error('这是一个错误信息');
    console.warn('这是一个警告信息');
  5. console.assert() : 用于在条件为 false 时输出错误信息。
    const condition = false;
    console.assert(condition, '条件为 false，输出这条信息');
  6. console.clear() : 清空控制台的输出。
    console.clear();
  7. console.dir() : 用于打印对象的可枚举属性，方便查看对象的详细结构。
    const obj = { name: 'Alice', age: 25 };
    console.dir(obj);

禁止下拉刷新

下拉刷新是当前流行的移动开发模式。如果你不喜欢这样做，只需将overscroll-behavior-y属性的值设为contains即可达到此效果。

body {
 overscroll-behavior-y: contain;
}

这个属性对于组织模态窗口内的滚动也非常有用——它可以防止主页在到达边框时拦截滚动

使整个网页的 内容可编辑

document.body.contentEditable='true'; 是一段 JavaScript 代码，用于使整个网页的 内容可编辑。这意味着用户可以直接在浏览器中点击并编辑文本，就像在文本编辑器中一样。

document.body.contentEditable = 'true';

网站平滑滚动

在元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。

html{    
    scroll-behavior: smooth;  
}

:empty 表示空元素

此选择器定位空的

元素并隐藏它们

p:empty{   
   display: none;  
}