原先效果
HTML12345<div class="box"> <span class="ellipsis"> 自方心使治了中音這成藝登過成正令裡天吸國過化式公臺向化式對件年數病天聲爸實正令飛有特做過成突是視一完 </span></div>
CSS123456.box { width:400px; margin: 600px auto; padding: 10px; border: 2px solid #000;}
單行文字隱藏效果
CSS12345.ellipsis{ overflow: ...
筆記一下自己公司久久會用一次的 git 指令
複製倉庫1git clone --bare [old repository url]
進入到倉庫目錄，通過 mirror 參數推送到新的 Repository
12cd [old repository]git push --mirror [new repository url]
這樣就會把舊倉庫原樣的複製到新倉庫上，包括所有的分支、提交記錄等等
解决fatal: refusing to merge unrelated historiesGit 再合併兩個倉庫或兩個分支時，有時候會出現這個錯誤: fatal: refusing to merg...
什麼是演算法(Algorithm)
在數學（算學）和電腦科學之中，為任何良定義的具體計算步驟的一個序列，常用於計算、資料處理和自動推理。精確而言，演算法是一個表示爲有限長列表的有效方法。演算法應包含清晰定義的指令用於計算函式。維基百科
「演算法」是用以執行計算或完成作業的程序，可以想像成手機裡的電話簿，想找出一筆特定的聯絡資料，可以從第一筆資料開始一筆一筆查找，也可以利用查詢功能查找，其中的過程就可以稱為是演算法。
演算法的簡單定義式：輸入 + 演算法 = 輸出Input -> Algorithm -> Output ex: 3 * 3 = 9
對演算法有基礎...
如何使用 JavaScript 實現複製 DIV 內的內容1.創建要附加到文檔的 <textarea> 元素。將其值設置為我們要復製到剪貼板的字符串。2.將所述 <textarea> 元素附加到當前HTML文檔3.使用 HTMLInputElement.select() 選擇 <textarea> 元素的內容。4.使用 Document.execCommand('copy') 將 <textarea> 的內容複製到剪貼板。5.從文檔中刪除 <textarea> 元素。
123456789101112131415...
Day 5: Flex Panels Image Gallery用 CSS-Flex 與 JS 製作一個點擊後會展開的圖片展示效果
主要練習:
CSS - Flexbox
JS - transitionend event
CSSStep 1 :首先可以看到 HTML 中，有一個 .panels 包覆著 5 個 .panel，預覽畫面時，發現畫面是由上到下排列的，但我們要的是這 5 個 .panel 橫向並等寬的佔滿畫面，所以這時我們在 .panels 上使用 display: flex 屬性，讓內層子元素都變成 flex 屬性。
Step 2 :這時會看到 .panel 變成橫...
Day 4: Array Cardio Day 1對於 ECMAScript5 增加的陣列方法做進一步的認識。
在先前的文章中，有針對過這些陣列的基本用法做過詳細的介紹，所以這邊有的習題不會講解的那麼仔細，如果對以下幾個陣列方法還不熟悉的，可以先去看看這篇文章。
主要練習:
JS - Array.prototype.filter()
JS - Array.prototype.map()
JS - Array.prototype.sort()
JS - Array.prototype.reduce()
JS - Array.prototype.forEach()
題目內容首先從草...
Day 3: Playing with CSS Variables and JS學習使用 CSS 變數並搭配 JS
主要練習:
CSS - Variables
HTML5 - data-* attribute
JS - element.dataset.camelCasedName
JS - CSSStyleDeclaration.setProperty()
JS - Document.documentElement
設定 CSS 變數CSS - Variables在原生的 CSS 中我們也可以使用變數的概念，相較於 CSS 前處理器（例如，SASS/SCSS），CSS 前處理...
Day 2: CSS + JS Clock使用 JS 及 CSS 製作出一個簡易的時鐘。
主要練習:
CSS - transform
JS - Date
JS - HTMLElement.style
JS - window.setInterval()
設定 CSS 樣式CSS - transform開啟專案後，可以看到所有只指針都指在9點鐘的方向，這時我們需要用 CSS transform的功能去調整指針的位置到12點鐘方向。
在 CSS 中找到 .hand 並加入以下程式碼:
12345.hand { transform-origin: 100%; /* 將元素...
Day 1: JavaScript Drum Kit透過 JavaScript 模擬一個打鼓的頁面，在按下按鍵的同時，頁面上對應的字母按鈕會變大並加上邊框，同時具有樂器的聲音。
播放、增加動態效果Step1 : 偵測鍵盤按鍵Keycode為了知道我們鍵盤按鍵所對應的 Keycode ，所以我們先建立一個 window 的監聽事件去監聽’按下鍵盤’這個動作 (keydown)，所然後再用 console.log(e.keyCode) 來看看所對應的 Keycode。
12window.addEventListener('keydown', e => console.log(e.k...
Javascript Array Method在工作中，常常會遇到需要處理陣列的資料時候，所以熟悉 Javascript 裡的陣列方法是必須的，在剛學習時，常常會忘記也不清楚這些方法return回來的結果是甚麼、會不會改變原陣列中的資料。
所以在這邊做了個筆記，整理一下自己常使用的 JS 陣列方法，方便自己以後能夠快速查找，也希望對參考此篇文章的讀者有幫助。(有些自己不常用的陣列方法這邊就先不提，若未來常使用到會再做補充)
陣列內容操作在開頭或結尾處添加或移除一個元素 push()、pop()、unshift()、shift()如果要在陣列的開頭或結尾處添加或移除一個元素，這邊介...
