让我们一起探索一些便捷的 JavaScript 和 CSS 技巧，帮助你简化网页开发的工作流程，提升效率！
想知道用户的网络速度吗？可以通过 JavaScript 的 Network Information API 实现！访问 navigator.connection.downlink 即可获取下行速度（单位：Mbps）。
if (navigator.connection) {
const downlink = navigator.connection.downlink;
console.log(`当前下载速度：${downlink} Mbps`);
} else {
console.log("浏览器不支持 Network Information API");
}
请注意，这个 API 的支持情况在不同浏览器中可能有所不同。
想给移动端的网页应用增加触觉反馈？window.navigator.vibrate API 可以触发设备振动。
// 让设备振动 500 毫秒
if (navigator.vibrate) {
navigator.vibrate(500);
} else {
console.log("不支持振动 API");
}
// 使用振动和暂停的组合模式
if (navigator.vibrate) {
navigator.vibrate([200, 100, 200, 100, 200]);
}
记得在使用前检查浏览器和设备的兼容性。
在某些场景下，你可能需要限制用户向输入框中粘贴内容。以下代码可以实现这一需求。
<input type="text">
<script>
const input = document.querySelector('input');
input.addEventListener("paste", function(e){
e.preventDefault();
});
</script>
注意： 禁止粘贴在某些情况下可能影响用户体验，请谨慎使用。
不一定非要使用 JavaScript 隐藏元素。你可以利用原生 HTML 的 hidden 属性轻松隐藏它们。
<p hidden>我是不可见的！</p>
这种方式和 CSS 的 display: none; 类似，让元素消失。
告别 CSS 中冗长的 top、left、right、bottom 组合！inset 属性让你的定位更简洁。
/* 传统方式 */
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* 使用 inset */
div {
position: absolute;
inset: 0;
}
这样写不仅简洁，还能提高代码的可读性！
console.log() 是调试的基础，但其实浏览器控制台还有很多强大功能：
-
console.table()：以表格格式显示数组或对象。const data = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ]; console.table(data); -
console.group()和console.groupEnd()：将相关日志分组，便于组织。console.group('分组标签'); console.log('日志 1'); console.log('日志 2'); console.groupEnd(); -
console.time()和console.timeEnd()：测量代码执行时间。console.time('计时器'); // 代码片段 console.timeEnd('计时器'); // 输出所花时间 -
console.error()、console.warn()、console.assert()：输出错误、警告和断言，增强调试效率。 -
console.clear()：清空控制台。 -
console.dir()：显示对象属性的交互式列表。
要禁用移动端页面的下拉刷新效果，可以使用 overscroll-behavior-y CSS 属性。
body {
overscroll-behavior-y: contain;
}
此属性还能帮助管理模态框滚动，避免滚动到底后背景页面也随之滚动。
需要快速让网页变为可编辑区域？contentEditable 属性帮你实现！
document.body.contentEditable = 'true';
注意： 这会让用户可以编辑页面内容，可能影响页面结构和脚本执行。请确保控制好用户输入。
你知道吗？HTML 元素的 ID 可以直接作为 JavaScript 中的变量来引用，无需使用 document.getElementById()。
<div id="test"></div>
<script>
console.log(test); // 自动引用 id 为 "test" 的元素
</script>
这种方法方便快捷，但为了代码的可维护性，建议在实际项目中仍使用 document.getElementById()。
想让页面滚动更顺滑？只需在 <html> 的 CSS 中加入 scroll-behavior: smooth;。
html {
scroll-behavior: smooth;
}
:empty 选择器可以有效定位并样式化空元素。
p:empty {
display: none;
}
例如，上述代码会将所有空的 <p> 标签隐藏。
通过掌握这些高效的 JavaScript 和 CSS 技巧，可以让你的开发工作事半功倍，提升用户体验和代码可读性。赶快试试吧！
