国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

30-seconds-code——browser

izhuhaodev / 783人閱讀

摘要：顯示所有指定的元素用操作符和清除所有指定元素的屬性。使用了兩個事件監聽器。將指定的數組元素轉換成元素標簽，然后將它們插入指定的選擇器元素內用和去生成一個元素標簽列表復制一個字符串到剪切板。用去執行復制到剪切板。

英文文章來源于：https://github.com/Chalarangelo/30-seconds-of-code/blob/master/README.md

Browser currentURL

返回當前頁面的 URL。

用 window.location.href 獲得當前的 URL.

const currentURL = () => window.location.href;
// currentUrl() -> "https://google.com"
getURLParameters

返回一個包含當前頁面 URL 的參數的對象.

用 match() 和一個合適的正則來獲得所有的鍵值對， 用Array.reduce() 去映射它們到一個對象內。
用 location.search 獲得當前 url 的參數.

const getURLParameters = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce(
    (a, v) => (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1), a), {}
  );
// getURLParameters("http://url.com/page?name=Adam&surname=Smith") -> {name: "Adam", surname: "Smith"}
redirect

重定向到一個指定的 URL.

用 window.location.href 或 window.location.replace() 重定向 url 。
如果asLink 為 true，則模擬一個 鏈接單擊，否則為重定向。

const redirect = (url, asLink = true) =>
  asLink ? window.location.href = url : window.location.replace(url);
// redirect("https://google.com")
httpsRedirect

如果它當前在HTTP中，將頁面重定向到HTTPS。另外，按后退按鈕不會將其返回到HTTP頁面，因為它在歷史中被替換了。

用 location.protocol 去獲得當前所使用的協議。如果不是 HTTPS，用 location.replace() 將當前頁轉換為使用 HTTPS 協議。用 location.href 去獲得鏈接地址，用 String.split() 移除當前 URL的協議。

const httpsRedirect = () => {
  if(location.protocol !== "https:") location.replace("https://" + location.href.split("http://")[1]);
}
detectDeviceType

檢測網站是在移動設備，還是在桌面/筆記本上打開。

用一個正則表達式檢測 navigator.userAgent 屬性來判斷是移動設備還是桌面/筆記本。

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? "Mobile"
    : "Desktop";
detectDeviceType(); // "Mobile" or "Desktop"
scrollToTop

平滑滾動到頁面頂部。

用 document.documentElement.scrollTop 或 document.body.scrollTop 得到頁面滾動后的top值。
用 window.requestAnimationFrame() 去實現平滑滾動.

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
// scrollToTop()
elementIsVisibleInViewport

如果指定的元素出現在可視窗口內，返回 true；否則，返回 false .

用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 的值來判斷給定元素是否在可視窗口內.
如果忽略第二個參數或者指定為 true 將判斷元素的部分出現在可是窗口內。

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
// elementIsVisibleInViewport(el) -> false (not fully visible)
// elementIsVisibleInViewport(el, true) -> true (partially visible)
bottomVisible

如果到達頁面可顯示區域的底部，返回 true ，否則返回 false .

用 scrollY, scrollHeight 和 clientHeight 去判斷是否到達頁面可顯示區域底部.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
// bottomVisible() -> true
getScrollPosition

返回頁面滾動后的位置，也即是html文檔的卷起位置.

如果瀏覽器支持 pageXOffset 和 pageYOffset 就用它們；否則就用 scrollLeft 和 scrollTop.
參數 el 的默認值為 window.

const getScrollPosition = (el = window) =>
  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPosition() -> {x: 0, y: 200}
getStyle

返回指定元素屬性的css值。

用 Window.getComputedStyle() 去獲取指定元素的屬性值。

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
getStyle(document.querySelector("p"), "font-size"); // "16px"
hasClass

如果一個元素有指定的 class，返回 true ；否則，返回 false.

用 element.classList.contains() 去判斷一個元素是否有一個指定的class.

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector("p.special"), "special"); // true
toggleClass

切換一個元素的class。

用 element.classList.toggle() 去切換指定元素的class。

const toggleClass = (el, className) => el.classList.toggle(className);
toggleClass(document.querySelector("p.special"), "special"); // 這個段落將不再有 "special" class
setStyle

設置指定元素css樣式屬性的值.

用 element.style 設置指定元素的樣式 value。

const setStyle = (el, ruleName, value) => (el.style[ruleName] = value);
setStyle(document.querySelector("p"), "font-size", "20px"); // The first 
 element on the page will have a font-size of 20px
hide

隱藏所有指定的元素。

用 spread (...) 操作符和 Array.forEach() 去給所有的指定元素添加 display: none 樣式 。

const hide = (...el) => [...el].forEach(e => (e.style.display = "none"));
hide(document.querySelectorAll("img")); // Hides all  elements on the page
show

顯示所有指定的元素

用spread (...) 操作符和 Array.forEach() 清除所有指定元素的 display 屬性。

const show = (...el) => [...el].forEach(e => (e.style.display = ""));
show(document.querySelectorAll("img")); // Shows all  elements on the page
speechSynthesis

語音合成 (實驗特性)

用 SpeechSynthesisUtterance.voice 和 window.speechSynthesis.getVoices() 將一個消息轉換為語音.
用 window.speechSynthesis.speak() 播放消息.

更多詳情請參考 SpeechSynthesisUtterance interface of the Web Speech API.

const speechSynthesis = message => {
  const msg = new SpeechSynthesisUtterance(message);
  msg.voice = window.speechSynthesis.getVoices()[0];
  window.speechSynthesis.speak(msg);
};
speechSynthesis("Hello, World"); // // plays the message
onUserInputChange

不管什么時候用戶的input類型改變 (mouse or touch) 執行這個函數。用于啟用/禁用依賴于輸入設備的代碼。這個過程是動態的，并于混合設備（例如：觸摸屏，筆記本）一起工作。

使用了兩個事件監聽器。假如 mouse 輸入初始化，然后綁定一個 touchstart 時間將聽頁面。
依據 touchstart 添加一個 mousemove 事件監聽器，然后用 performance.now() 在20ms觸發兩次 mousemove 事件。
在這兩種情況下，執行回調函數以input類型作為參數。

const onUserInputChange = callback => {
  let type = "mouse",
    lastTime = 0;
  const mousemoveHandler = () => {
    const now = performance.now();
    if (now - lastTime < 20)
      (type = "mouse"), callback(type), document.removeEventListener("mousemove", mousemoveHandler);
    lastTime = now;
  };
  document.addEventListener("touchstart", () => {
    if (type === "touch") return;
    (type = "touch"), callback(type), document.addEventListener("mousemove", mousemoveHandler);
  });
};

onUserInputChange(type => {
  console.log("The user is now using", type, "as an input method.");
});
UUIDGeneratorBrowser

在瀏覽器中生成UUID。

用 crypto API 生成一個 UUID, 可參考 RFC4122 v.4 。

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
  );
UUIDGeneratorBrowser(); // "7982fcfe-5721-4632-bede-6000885be57d"
arrayToHtmlList

將指定的數組元素轉換成

  • 元素標簽，然后將它們插入指定的id選擇器元素內.

    用 Array.map() 和 document.querySelector() 去生成一個html元素標簽列表.

    const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`
  • ${item}
    • `);
// arrayToHtmlList(["item 1", "item 2"],"myListID")
    copyToClipboard

    復制一個字符串到剪切板。只用在用戶觸發事件時才會執行 (i.e. 內部用 click 事件監聽)。

    創建一個