原创 webstorm中超好用的九個快捷鍵

1    Ctrl+shift+/ 註釋當前所選區域; 2    Ctrl+/ 註釋當前行; 3    Ctrl+D 將當前的行變爲一模一樣的兩行; 4    Ctrl+Y 刪除當前行; 5    Ctrl+C 全選當前行並拷貝當前行;

原创 關於Js中的this指針指向的對象

0x00 前言     this指針的指向問題一直是個大坑,今天無意間刷到了一篇文章,覺得說的挺好,記錄一下方便複習     鏈接:https://www.cnblogs.com/pssp/p/5216085.html 0x01 正文  

原创 Js查漏補缺-12

0x00 window對象(續)      清除定時器-clearInterval() <button class="btn-start">開始定時器</button> <button class="btn-stop">停止定時

原创 css動畫實現炫酷的hover效果

0x00 前言     今日在b站上看到一個hover動畫效果,感覺寫的非常好,所以復刻了一個 0x01 HTML+JS <!doctype html> <html class="no-js" lang=""> <head> <m

原创 京東秒殺倒計時仿寫

<div class="secKill"> <div class="secKill-title">京東秒殺</div> <div class="secKill-time"> <div class="sec

原创 html+css實現視差滾動

0x00 HTML代碼 <div class="main"> <section class="list-it

原创 Js查漏補缺-05

0x00 精靈輪播圖-淘寶     使用js更改li的backgroundPosition屬性,達到分割一張圖,並作爲不同塊的background的目的; <script> let lis = document.quer

原创 Js查漏補缺-10

0x00 事件委託     當需要給多個元素設置監聽器時,不給子元素設置監聽器,而是給父元素設置監聽器,利用冒泡事件來設置子元素的事件,這樣可以減少dom的操作次數,提高程序性能。     <div class="father">

原创 Js如何獲取display爲none的元素的寬高

0x00 原理     在css中visibility:hidden爲不可見屬性,但使用visibility:hidden隱藏的元素有物理尺寸,因此這裏的原理就是將display:none的元素轉換爲isibility:hidden的元素

原创 Js查漏補缺-09

0x00 事件流     removeElementListener();可以解除元素的事件監聽器綁定     事件流是頁面中接受事件的傳遞順序,包括捕獲階段,當前目標階段,冒泡階段      注意,Js只能執行冒泡或者捕獲中的一個階段

原创 Js查漏補缺-11

0x00 鍵盤事件     常用的鍵盤事件有三個分別爲onkeyup onkeydown onkeypress     <script> document.addEventListener('keyup',() => {

原创 Js查漏補缺-06

0x00 換膚     通過點擊圖片來更換網頁的背景(參考百度) <script> let imgs = document.querySelector('.baidu').querySelectorAll('img');

原创 Js查漏補缺-07

0x00 兄弟節點     nextSibling();獲取的是下一個兄弟節點 // 包括文本節點     previousSibling();獲取的是上一個兄弟節點 // 包括文本節點     nextElementSibling();

原创 Js查漏補缺-08

0x00 三種動態創建元素方法的對比     1 document.write();如果頁面文檔流加載完了再調用會重繪頁面,       這種方法會刪除之前的頁面並重建一個頁面,然後將函數中的內容寫入新頁面;     2 innerHTM

原创 關於img標籤的處理

0x00 寫在最前     目前網頁並沒有一個完美的img解決方案,若需要完美按照要求顯示圖片可以使用ps或者裁剪圖片來實現; 0x01 圖片自適應     將父元素div加入以下代碼 display:flex; align-ite