【Angular v4】環境架設

下載檔案 Angular quickstart node.js 環境建置 安裝node.js 解壓縮quickstart 依序輸入這3個指令 cd 指向quickstart路徑 npm install npm start 檔案編輯 app/component.ts→定義元件 index.html→定義首頁 main.ts→啟動Web APP style.css→定義全體Web APP的樣式 編輯元件 打開app/component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: ` <h1>Hello {{name}}</h1> //變數用2個大括弧包起來 <h2>text</h2> `, styles: [` //撰寫style h1 { color: red; } h2 { color: bluec; } `] }) export […]

【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, […]