用原生JS做一個簡單的抽獎功能頁面

用原生 JavaScript 做一個簡單的抽獎功能頁面

本篇大綱:本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎,就自己動手寫了一個出來。把抽獎的名單換成店家名稱,順便再加上Google Map進去,就解決不知道午餐要吃什麼的煩惱啦~

File API 客製上傳檔案按鈕(input file)

File API 客製上傳檔案按鈕 / input file

本篇大綱:客製上傳檔案input html 部份、客製上傳檔案input js 部份、示範頁面。最近朋友遇到一個需求,就是要客製上傳檔案的按鈕。覺得寫成一篇,然後把code存起來,以後要用比較好找。可以看到input的id,跟label的for,兩個值要是相同的,這樣就可以把label跟input綁起來。

mailto: 點擊連結 開啟寄送email

mailto: 點擊連結 開啟寄送 email

mailto: 點擊連結 開啟寄送email。本篇大綱:本篇要解決的問題、基本使用 mailto:收件人信箱、一次寄給多人 用半形逗號、寄送副本 cc、bcc、帶入信件主旨 subject、帶入信件內文 body、內文中要折行/斷行/換行 %0D%0A。

用純css寫的網頁預覽效果

用純 CSS 寫的網頁預覽效果

覺得可以用在歷年回顧或是頁面預覽的區塊上使用,就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點,實際上會寫到的css沒幾行,如下…

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

文章中說有資歷的前端在面試時會遇到三個問題,能回答的話offer大概也到手了:1、用戶輸入URL回車之後,瀏覽器到底做了啥?2、頁面渲染的完整流程是怎樣的?3、前端性能優化有哪些經驗?坦白說,因為這三題我完全答不出來,覺得是很勸世的一篇文章啊,就認真的來看。

漸層色按鈕hover效果

漸層色按鈕 Hover 效果

本篇大綱:本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時,看見他們頁面上的按鈕,就是非漸色轉到漸層色,並且還能帶有transition的過渡。看了一下他們的寫法,發現原理很簡單,就寫了一個在CodePen上,方便以後取用。

一個簡單的卡片樣式 simple card ui

一個簡單的卡片樣式 Simple Card UI

從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。

medium 漸進式圖片

像 Medium 的漸近式圖片加載

本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。