浏览器地址栏运行JavaScript代码
javascript:alert('hello!');
- Firefox不支持；
- 其他浏览器必须手动输入才可执行；
浏览器地址栏运行HTML代码
data:text/html,<h1>Hello, world!</h1>
- 在非IE浏览器可以运行
浏览器变成文本编辑器
地址栏输入：
data:text/html, <html contenteditable>
控制台输入：
document.body.contentEditable='true';
利用a标签自动解析URL
var a = document.createElement('a'); a.href = 'https://www.maomin.club'; console.log(a.host); // www.maomin.club
页面拥有ID的元素会创建全局变量
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app">我是内容</div> <script type="text/javascript"> console.log(app.textContent) // 我是内容 </script> </body> </html>
引用CDN文件时，不用HTTP标识
<script src="//cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script>
利用script标签保存任意信息
<script type="text" id="template"> <h1>This won't display</h1> </script> <script type="text/javascript"> const text = document.getElementById('template').textContent; console.log(text); // <h1>This won't display</h1> </script>
在页面中隐藏鼠标
*{ cursor: none!important; }
文字模糊效果
p { color: transparent; text-shadow: #111 0 0 5px; }
实时编辑CSS
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> style{ display: block; } </style> </head> <body> <style contentEditable> body { color: blue } </style> </body> </html>
实现长宽比固定区域
<div style="width: 100%; position: relative; padding-bottom: 56.25%;"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"> this content will have a constant aspect ratio that varies based on the width. </div> </div>
禁止他人使用iframe标签引用网址
if (window.location != window.parent.location) window.parent.location = window.location;
生成随机字符串
function generateRandomAlphaNum(len) { var rdmString = ""; for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); }
浮点数转化为整数
console.log(~~1.2); // 1
谢谢阅读，如果你觉得对你有帮助，欢迎一键三连
