原创 如何使用 JS 判斷用戶是否處於活躍狀態

有時候,我們需要在網頁判斷用戶是否處與非活躍狀態,如果用戶長時間沒有在頁面上進行任何操作,我們則判定該用戶是非活躍的。 在 javascript 中我們可以通過監聽某些鼠標或鍵盤相關的事件來判定用戶是否在活躍中。 案例演示 在線演示 - 使

原创 使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

在前端開發過程中,調試的時候,我門會使用 console.log 等方式查看數據。但對於圖片來說,僅靠展示的數據與結構,是無法想象出圖片最終呈現的樣子的。 雖然我們可以把圖片數據通過 img 標籤展示到頁面上,或將圖片下載下來進行預覽。但這

原创 CodePen 的國內替代「筆.COOL」,一個功能完備、使用便捷的在線HTML/CSS/JS編輯器和作品分享平臺

筆.COOL,是一個最近在國內嶄露頭角的在線HTML/CSS/JS編輯器和作品分享平臺。 筆.COOL 提供了一個在線的 HTML、CSS 和 JavaScript 代碼編輯器。無需任何安裝,你只需打開網站,就可以開始編寫前端代碼。編輯

原创 如何使用 JavaScript 獲取當前頁面幀率 FPS

可以通過計算每秒 window.requestAnimationFrame 的調用頻率來做爲 FPS 值。它接收一個回調函數,該回調函數會在瀏覽器下一次重繪之前執行。所以只要我們循環調用並記錄單位時間內的調用次數就能計算當前頁面的幀率了。

原创 在 JS 中調整 canvas 裏的文字間距

實現說明: 在 JS 中 canvas 原生沒有支持對文字間距的調整,我們可以通過將文字的每個字符單獨渲染來實現。本案例從 CanvasRenderingContext2D 對象的原型鏈上擴展了一個用於繪製帶間距的函數 fillTextWi