如何設定CSS網頁反白效果::selection

CSS ::selection 網站當滑鼠反白時,反白區域的底色通常是藍色,但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改,設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。 p::-moz-selection { color: red; } p::selection { color: red; } 如上所示,您可以::selection對單個元素進行樣式設置。 IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。 Firefox...

一探究竟了解React-router 4簡易教學

React-router和React-router-dom的選擇 很多剛使用react的同學,在接觸到react-router的時候往往開始會比較無概念,都會很難進入狀況,什麼react-router和react-router-dom?下面我們就來一探究竟。 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它沒有提供dom操作進行跳轉的API。 React-router-dom...

JavaScript async函數await的含義和用法

終極解決Javascript非同步 異步操作是JavaScript編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個問題。 從最早的回調函數,到Promise對象,再到Generator函數,每次都有所改進,但又讓人覺得不徹底。它們都有額外的複雜性,都需要理解抽象的底層運行機制。 異步I / O不就是讀取一個文件嗎,幹嘛要搞得這麼複雜?異步編程的最高境界,就是根本不用關心它是不是異步。 async函數就是隧道盡頭的亮光,很多人認為它是異步操作的終極解決方案。 異步函數是什麼?...

React.js Search搜尋功能使用過濾迴圈 filter()

filter函數特性: 遍歷每個元素,回傳 true 時,目前的值會保留在陣列內,這會回傳一個新陣列,而不是修改原本的陣列。 原理 當input輸入文字時觸發onChenge事件,event.target.value值存入this.state.search,再利用this.state.search使用filter()回圈過濾data內的資料。 程式碼 class FilteredList extends React.Component{ constructor(props){ super(props) this.state = {...

解決非同步使用Javascript callback() 回調函數

callback() 回調函數是一個作為參數傳遞給另一個函數的函數,然後在外部函數中調用該函數來完成某種例程或動作。 callback()簡單的例子: function greeting(name) { alert('Hello ' + name); } function processUserInput(callback) { var name = prompt('Please enter your name.'); callback(name); } processUserInput(greeting);...

Chart.js update() Ajax 更新表單資料方法範例

使用update()函數經過AJAX方法更新表單。 var ajaxCallLiveSubs = function(){ // endopoint var url = 'https://jsonplaceholder.typicode.com/posts/1'; var interval = 5000; var time = 0; // Live Subs Charts var ctx_live = document.getElementById("myChart"); var liveChart = new...

如何在react-router v4中將history.push傳遞參數params

this.props.history.push 在導航時,您可以將傳遞道具傳遞給歷史對象 this.props.history.push({ pathname: '/template', search: '?query=abc', state: { detail: response.data } }) Link 或類似的鏈接組件 My Link 訪問通過的道具 然後在用/template路由呈現的組件中,可以訪問通過的道具 this.props.location.state.detail...

CSS3 新單位寬度高度設定成vh vw – 80vh vs 80%

vh and vw vh:表示的是view height,也就是螢幕可視範圍高度的百分比 vw:表示的是view width,也就是螢幕可是範圍寬度的百分比 範例 比較80vh vs 80% css vh 設定視窗可見寬度高度%百分比,以下範例比較80vh與80%的不同之處。 See the Pen CSS 80vh vs 80% by saintjon (@saintjon) on...