一、浏览器地址栏变身“代码编辑器”
直接运行JavaScript
在地址栏输入 javascript:alert('Hello from URL!')，浏览器会立即执行这段代码并弹窗！但注意：Chrome和IE会默认去掉javascript:前缀，需手动补全，而Firefox不支持此功能。
运行HTML代码
输入 data:text/html,<h1>Hello World!</h1>，浏览器会渲染成一个简易页面。
浏览器变编辑器
输入 data:text/html,<html contenteditable>，浏览器瞬间变成一个可编辑的记事本！
二、隐藏的DOM魔法：ID元素全局化
为元素设置id属性后，JavaScript会自动将其作为全局变量！例如：
<div id="demo"></div>
<script>console.log(demo); // 直接输出div元素</script>虽然方便，但项目中建议仍用document.getElementById，避免命名冲突。
三、用a标签解析URL，告别正则！
创建一个a标签并赋值URL，浏览器会自动解析出协议、域名、路径等：
const a = document.createElement('a');
a.href = 'https://example.com/path?key=value#hash';
console.log(a.hostname); // "example.com"
console.log(a.search); // "?key=value"封装成工具函数，轻松提取URL各部分参数。
四、CSS黑科技：多重边框与模糊文字
多重边框
用box-shadow叠加实现：
div {
box-shadow: 0 0 0 5px red, 0 0 0 10px blue;
}文字模糊效果
结合透明颜色和阴影：
p {
color: transparent;
text-shadow: 0 0 5px #000;
}五、不声明变量，如何交换值？
一行代码实现变量交换：
let a = 1, b = 2;
a = [b, b = a][0]; // a=2, b=1原理是利用数组解构赋值，极简但可读性较差，适合炫技场景。
六、浮点数快速取整：位运算符的妙用
用|0或~~替代Math.floor()，性能更高：
const num = 3.14;
console.log(num | 0); // 3
console.log(~~num); // 3适用于动画、像素计算等高频操作。
七、实时编辑页面样式
在控制台输入：
document.body.contentEditable = 'true';整个页面变为可编辑状态！结合style标签的contenteditable属性，还能实时修改CSS并预览效果。
八、CDN引入的协议自适应技巧
省略URL的http:或https:，让浏览器自动匹配当前页面协议：
<script src="//cdn.example.com/library.js"></script>避免混合内容错误，提升安全性。
九、用script标签存储任意数据
设置type="text"的script标签，可存储HTML模板或配置信息：
<script type="text" id="config">
{ "theme": "dark", "lang": "zh" }
</script>
<script>
const config = JSON.parse(document.getElementById('config').innerHTML);
</script>十、恶搞console.log：模糊输出与炫酷样式
重写console.log，让输出内容模糊或添加样式：
const _log = console.log;
console.log = (...args) => {
_log.call(console, '%c' + args.join(' '), 'color: red; font-size: 20px;');
};
console.log('这是红色大字！');甚至可以用text-shadow让文字模糊，整蛊同事必备！
十一、浮点数快速取整
使用位运算符|0或~~实现高效向下取整，性能优于parseInt和Math.floor：
console.log(3.14 | 0); // 3
console.log(~~3.14); // 3十二、随机字符串生成
利用Math.random().toString(36)将随机数转为36进制字符串，截取片段生成随机ID：
const randomStr = Math.random().toString(36).substr(2, 10);十三、隐藏鼠标光标
通过CSS禁用页面光标，制造“无指针”效果：
* { cursor: none !important; }十四、Object.fromEntries快速反转对象键值
将对象键值对反转（需确保值唯一）：
const obj = { a: 1, b: 2 };
const reversed = Object.fromEntries(
Object.entries(obj).map(([k, v]) => [v, k])
); // {1: 'a', 2: 'b'}十五、document.designMode开启全局编辑
让整个页面变为可编辑状态（类似开发者工具）：
document.designMode = 'on'; // 输入后页面任意区域可编辑
