一個好看的執行js的工具

https://runjs.dev/

瀏覽器重複使用的命令

需要: 有一個重複使用的測試程式碼

解決方案: 我們可以寫在Google瀏覽器裡面,然後進行呼叫

教程開始:

在這裡新建檔案修改檔名稱就可以了,記得ctrl+S儲存下

然後在Elements這邊,進行ctrl+P 輸入!+檔名稱,回車就可以使用了

滾動平滑

定義瀏覽器的滾動位置是跳到新位置或者使用者點選滾動對應的位置,平滑過渡的動畫

html {
  scroll-behavior: smooth;
}

api 特效

scroll-behavior屬性接受兩個值,本質上開啟和關閉平滑滾動功能

• auto
  關閉
• smooth 平滑滾動

DOMParser

讓html字串解析為DOM樹,格式型別包括XML文件,或者HTML文件

let domParser=new DOMParser()

引數

string

​ 必需,字串,表示用於解析的DOM字串(DOMString)

mimeType

​ 必須,字串,解析的文件型別

例子

function stringToHTML(str) {
  let parser = new DOMParser();
  let doc = parser.parseFromString(str, 'text/html');
  return doc
}

console.log(stringToHTML('<h1>fsdksdjfkksdfjsdls</h1>'));

XMLSerializer

方法跟DOMParser相反,XMLSerializer可以讓DOM樹物件序列化為字串

let xmlSerializer=new XMLSerializer()

有個屬性serializeToString()方法,可以返回序列化的XML字串

let div = document.createElement('div');
div.textContent = '我是水';
let xml=new XMLSerializer();
console.log(xml.serializeToString(div));
//  <div xmlns="http://www.w3.org/1999/xhtml">我是水</div>

serializeToString()方法和outerHTML 類似,但是也有區別

• outerHTML 只能作用於Element 元素上,但是不能是其他節點型別,但是serializeToString 適用於任意節點型別

• 節點型別	釋義
  DocumentType	文件型別
  Document	文件
  DocumentFragment	文件片段
  Element	元素
  Comment	註釋節點
  Text	文字節點
  ProcessingInstruction	處理指令
  Attr	屬性節點

• serializeToString() 方法會自動給根元素新增增加xmins命名龍劍

  div = document.createElement('div');
  // 1. 
  console.log(div.outerHTML);
  // 2.
  var xmlSerializer = new XMLSerializer();
  console.log(xmlSerializer.serializeToString(div));
  // 1. <div></div>
  // 2. <div xmlns="http://www.w3.org/1999/xhtml"></div>
  

對於我們這種api呼叫的開發者用的不多,但是如果日後成為優秀的creater,優秀的框架創造者,這種學習必不可少

物件的長度

let obj = {
  name: 'xxx',
  age: 12,
  [Symbol('aaa')]: 1
}
console.log(Object.keys(obj));
// [ 'name', 'age' ]
console.log(Reflect.ownKeys(obj));
// [ 'name', 'age', Symbol(aaa) ]
console.log(Object.getOwnPropertyNames(obj));
// [ 'name', 'age' ]
console.log(Object.getOwnPropertySymbols(obj));
// [ Symbol(aaa) ]

模仿側邊導航欄

angular版

<div id="main-body">
  <!--上層-->
  <header>
    <h1>左</h1>
    <div id="menu" (click)="clickR()">右邊</div>
  </header>
  <div class="nav" id="navMenu">
    <div id="close" (click)="close()">x</div>
    <div>內容</div>
  </div>
  <main>
    其他內容
  </main>
  <div class="overlay"></div>
</div>

#main-body {
  transition: all 0.7s;

  header { // 左
    height: 15vh;
    background-color: #92b35a;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }

  .nav { //右
    list-style: none;
    width: 0;
    height: 100vh;
    background-color: #86c28b;
    transition: all 0.4s linear;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;

    #close {
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background-color: darkred;
    }
  }

  //遮罩
  .overlay {
    width: 100%;
    height: 100vh;
    background: rgba(53, 52, 52, 43%);
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: all 0.5s linear;
  }
}

import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.less']
})
export class HelloComponent implements OnInit, AfterViewInit {
  @ViewChild('aaa') aaa;

  constructor() {
  }

  ngOnInit(): void {
  }

  public nav:HTMLElement;//右邊側邊導航
  public body:HTMLElement;//整體
  public clear:HTMLElement;// 點選x
  public overlay:HTMLElement;// 遮罩
  ngAfterViewInit() {
    this.nav = document.querySelector('#navMenu')
    this.body=document.querySelector('#main-body')
    this.clear=document.querySelector('#close')
    this.overlay = document.querySelector('.overlay');
  }

  clickR() {
    this.nav.style.width = '250px';
    this.body.style.marginRight = '250px';
    this.overlay.style.visibility='visible'
  }
  close(){
    this.nav.style.width = '0';
    this.body.style.marginRight = '0';
    this.overlay.style.visibility='hidden';
  }
}

原生版