【JavaScript】getter / setter

getter跟setter都是寫在物件底下的function方法 getter 給物件綁定訪問時(Access)可取得的函數 var obj = { log: [‘example’,’test’], get latest() { if (this.log.length == 0) { return undefined; }else{ return this.log[this.log.length – 1]; } } } console.log(obj.log); //[‘example’, ‘test’] console.log(obj.latest); // “test” setter setter可以設定參數,然後讓物件回傳不同的值 //language 是一個物件 var language = { set current(name) { this.log.push(name); }, log: [] } language.current = ‘EN’; //透過setter設定參數 console.log(language.log); // […]

【JavaScript】select元素相關操作

#mySelect.options 回傳選項清單 select#mySelect option apple option banana option grape console.log(mySelect.options) //回傳所有options的集合 //型態為HTMLOptionsCollection #mySelect.selectedIndex 回傳目前被選取到的index select#mySelect option apple option banana option grape console.log(mySelect.selectedIndex) //0

【JavaScript】假的scroll-bar

步驟 隱藏原生的scroll-bar 用CSS做出一個假的bar 算出scroll-bar的長度 當發生滑動時,改變bar的top 隱藏原生的scroll-bar 外層定義一個box,裡面要有假的bar與內容wrapper 外層box設overflow: hidden 內層wrapper設padding-left,這樣真正的scroll-bar就會超出外層box而被卡掉 .box#box .scroll-bar#bar .wrapper#wrapper img.items#items(src=”https://ianchen.thisistap.com/wp-content/uploads/OOD.jpg” width=”300px”) .box border: 1px solid #000 width: 300px height: 300px overflow: hidden .wrapper width: 100% height: 100% overflow-y: scroll padding-right: 28px Display 用CSS做出一個假的bar 利用絕對定位將假bar定位在box的右上方 .box#box .scroll-bar#bar .wrapper#wrapper .box border: 1px solid #000 width: 300px height: 300px overflow: hidden position: relative .wrapper […]

【JavaScript】previousElementSibling / nextElementSibling

説明 尋找前面 / 後面的元素 p#first 前面的元素 p#second 後面的元素 console.log(second.previousElementSibling); //<p id=”first”>​前面的元素​</p> console.log(first.nextElementSibling); //<p id=​”second”>​後面的元素​</p>​​  

【JavaScript】requestAnimationFrame

功能 楨率高的動畫函數。 setInterval最小時間單位是1毫秒,如果需要短時間大幅度的動態效果,則setInterval會顯得吃力。 這時就可以使用requestAnimationFrame 解説 requestAnimationFrame的callback函數的【第一個參數】會變成時間戳(=記錄當下的時間) requestAnimationFrame(step); function step(ggg){ console.log(ggg); //會回傳當下的時間,但只會回傳一次 } 如果想要讓時間戳一直回傳過來,就要在callback函式裡面呼叫requestAnimationFrame requestAnimationFrame(step); function step(ggg){ console.log(ggg); requestAnimationFrame(step); //會一直回傳時間戳過來 } 動畫的概念: 定義初始時間値,與變動時間値 紀錄毎次變動時間 減去 初始時間的相差値 相差値會越來越大 requestAnimationFrame(step); //定義初始時間値 let start=null; function step(ggg){ if(start==null){ start=ggg; //在一開始的時候帶入時間初始値 } let passed=ggg-start; //算出現在時間與初始時間的相差値 console.log(start); //會回傳初始時間値 console.log(passed); //會回傳經過的時間 requestAnimationFrame(step); } 用這個相差値帶入style的參數,就可以做出動態效果 button(onclick=”requestAnimationFrame(step)”) click me #animatebox #animatebox width: 300px height: 200px […]

【JavaScript】event.target

説明 配合click / mouserover事件使用,指出目前的target元素 .outer(onclick=”action()”) .inner span click me .outer background-color: #eee width: 200px height: 40px text-align: center .inner line-height: 40px display: inline-block function action(){ console.log(event.target); } 應用例:收合選單 如果選單的標題與內容不小心寫在同一層級, 事件又想要綁在最外層的元素, 可以配合contains鎖定事件觸發的目標。 ul li(onclick=”show(this)”) .title 第一層選單 click me .content 這是第一層選單的內容 br |內容… br |內容… br |內容… li(onclick=”show(this)”) .title 第二層選單 click me .content 這是第二層選單的內容 br |內容… br […]

【JavaScript】事件屬性的參數

説明 【事件屬性】 設定事件時,不使用事件綁定(addEventListener) 而將事件直接寫在tag的on事件屬性裡面 this的用法 ATTR的括弧裡面要寫this(要寫完整的this,不能任意命名) function內要放第一個變數,變數名稱自定義,不能用this .element(onclick=”getAction(this)”) click me function getAction(th){ console.log(th); } //”<div class=’element’ onclick=’getAction(this)’>click me</div>” ※注意 如果在function裡面直接用this,會變成叫出window (global) .element(onclick=”getAction(this)”) click me function getAction(th){ console.log(this); } //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} event的用法 function內直接用event就好 .element(onclick=”getAction()”) click me function getAction(m){ console.log(event); } //MouseEvent {isTrusted: true, screenX: 47, screenY: 162, […]

【JavaScript】customize select-picker

説明 利用JS與CSS,自定義select-picker的style 用<select>跟<option>做出真選單 隱藏掉<select>(隱藏真選單) 〔JS部分〕 讀取真選單<select>的內容,抓到後會是NodeList形式,給它轉換成陣列 換成陣列後,用mapping method,填充成<li>option內容</li>的形式 做出一個假的option wrapper / open-bar,然後把<li>們放進去 範例 引用函式庫:FontAwesome .selector select option 台灣 option 香港 option 柬埔寨 option 越南 option 緬甸 option 澳洲 option 美國 option 中國 option 澳洲 option 法國 option 印尼 option 英國 br br .selector select option good option apple option orange option red option beauty option […]

【JavaScript】JS的位置

説明 在HTML檔案中,JS不論是寫在頁面上,或是用檔案引入,都建議放在body後面。 理由:HTML文件的讀取方式是由上而下,如果寫在body前面的話,網頁還沒讀完JS就執行了,所以DOM會抓不到東西。 但若一定要寫在body前面的話,可以在JS內容外面加上一層load事件,讓網頁全部讀完後,再執行JS。 window.addEventListener(“load”, function(){ //這邊放入JS內容。 });