前端小工具总结

灰太狼 2022-12-27 01:24 126阅读 0赞

## 一、css 一行文本超出 ##

overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

**二、多行文本超出显示**

display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

## 三、页面一键变黑 ##

html { 
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

## 四、IOS 手机容器滚动条滑动不流畅 ##

overflow: auto;
    -webkit-overflow-scrolling: touch;

## 五、修改滚动条样式（隐藏 div 元素的滚动条） ##

div::-webkit-scrollbar { 
        display: none;
    }

## 六、使用 css 写出一个三角形角标 ##

div { 
        width: 0;
        height: 0;
        border: 5px solid #transparent;
        border-top-color: red;
    }

## 七、解决 ios audio 无法自动播放、循环播放的问题 ##

// 解决ios audio无法自动播放、循环播放的问题
    var music = document.getElementById('video');
    var state = 0;
    
    document.addEventListener('touchstart', function(){ 
        if(state==0){ 
            music.play();
            state=1;
        }
    }, false);
    
    document.addEventListener("WeixinJSBridgeReady", function () { 
        music.play();
    }, false);
    
    //循环播放
    music.onended = function () { 
        music.load();
        music.play();
    }

## 八、水平垂直居中 ##

div { 
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

.parent { 
        display: flex;
        justify-content: center;
        align-items: center;
    }

## 九、contenteditable ##

## 十、calc ##

div { 
        width: calc(25% - 20px);
    }

## 十一、Proxy 和 Object.defineProperty 区别 ##

new Proxy(target, { 
        get(target, property) { 
    
        },
        set(target, property) { 
    
        },
        deleteProperty(target, property) { 
    
        }
    })

const list = [1, 2, 3];
    const listproxy = new Proxy(list, { 
        set(target, property, value) { 
            target[property] = value;
            return true; // 标识设置成功
        }
    });
    
    list.push(4);

## 十二、Reflect ##

const proxy = new Proxy(obj, { 
        get(target, property) { 
            return Reflect.get(target, property);
        }
    })

## 十三、解析 get 参数 ##

const q = { };
    location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
    console.log(q);

## 十四、解析连接 url ##

// 创建a标签
    const aEle = document.createElement('a');
    // 给a标签赋值href路径
    aEle.href = '/test.html';
    // 访问aEle中的属性
    aEle.protocol; // 获取协议
    aEle.pathname; // 获取path
    aEle.origin;
    aEle.host;
    aEle.search;