前端開發(fā)中這些小技巧，你知道幾個？
瀏覽器地址欄運行JavaScript代碼
javascript:alert('hello!');
Firefox不支持； 其他瀏覽器必須手動輸入才可執(zhí)行；
瀏覽器地址欄運行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的元素會創(chuàng)建全局變量
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">我是內(nèi)容</div>
<script type="text/javascript">
console.log(app.textContent) // 我是內(nèi)容
</script>
</body>
</html>
引用CDN文件時，不用HTTP標識
<script src="http://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>
實現(xiàn)長寬比固定區(qū)域
<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標簽引用網(wǎng)址
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);
}
浮點數(shù)轉(zhuǎn)化為整數(shù)
console.log(~~1.2); // 1
評論
圖片
表情