前端知識點彙總（來自b站視訊分享）
阿新 • • 發佈：2021-11-20
- 1、css 三角形角標
- div{ width:0; height:0; border:5px solid #transparent; border-top-color:red;}
- 2、水平垂直居中
- div{ width:100px; height:100px;
- position:absolute;
- top:0;
- right:0;
- bottom:0;
- margin:auto;
- }
- 父級控制子集居中 .parent{ display:flex; justify-content:center; align-items:center;}
- 3、css 一行文字超出
- { overflow:hidden;
- text-overflow:ellipsis;
- white-space:nowrap;
- }
- 4、多行文字超出顯示
- { display:-webkit-box;
- -webkot-box-orient:vertical;
- -webkit-line-damp:3;
- overflow:hidden;
- }
- 5、ios手機容器滾動條滑動不流暢
- {overflow:auto;
- -webkit-overflow-scrowing:touch;
- }
- 6、解決ios audio無法自動播放、迴圈不播放的問題
- var music = document.getElementById('video');
- var state = 0;
- document.addElementListener('touchstart',function(){
- if(state == 0){
- music.play();
- state = 1;
- }
- },false);
- document.addElementListener('weixinJSBridgeReady',function(){
- music.play();
- },false);
- 迴圈播放
- music.onended = function(){
- music.load();
- music.play();
- }
- 7、contenteditable <divcontenteditable="true"></div> 通過這個屬性把標籤變為可編輯狀態只有input事件沒有change事件也不能像表單一樣通過maxlength控制最大長度
- 8、calc
- div{width:calc(25%-20px); }
- 9、Date 獲取當前時間毫秒值 方式一 Date.now() 方式二 new Date（）- 0 方式三 new Date().getTime()
- 建立date物件相容性問題 //window和安卓支援，ios和mac不支援 new Date('2021-11-20') //window和安卓支援，ios和mac支援 new Date('2021/11/20')
- 10、解析get引數 通過replace方式獲取url中的引數鍵值對，可以快速解析get引數
- const q = {};
- location.search.replace(/([^?&=]+)=([^&]+]/g,(_,k,v)=>q[k]=v));
- console.log(q);
- 11、解析連線url //快速建立a標籤 const aEle = document.createElement('a')
- //給a標籤賦值href路徑 aEle.href = '/test.html';
- //訪問aEle中屬性
- aEle.protocol;//獲取協議
- aEle.pathname;獲取path
- 。。。。。。。。。。。
- 12、Object.keys,values,entries
- const obj = {name:'ch',age:'20'};
- Object.keys(obj); //['name','age']
- Object.values(obj); //['ch','20']
- const l = Object.entries(obj); //[[name:'ch'],['age':'20']] obj物件轉換為陣列
- const m = new Map(l) 轉換為map
- 13、合併空運算子
- const name = ''
- console.log(name || 'ch') //ch 給系統預設值用法
- console.log(name ?? 'ch') //''