前端开发中这些小技巧，你知道几个？

爱被打了一巴掌 2021-09-08 05:16 485阅读 0赞

## 浏览器地址栏运行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标签保存任意信息 ##

##  ##

## 在页面中隐藏鼠标 ##

*{ 
        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