萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1435.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , 🎨CSS , ⚙️JavaScript , 🎬串流錄製】
在 OBS（Open Broadcaster Software）場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #日期與時間 #日期時間 #日期 #時間 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製

萌芽綜合天地

OBS：新增日期與時間至錄影或串流中 – 萌芽綜合天地

在 OBS（Open Broadcaster Software）場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友「sam0737」在 GitHub 中公開給大家一個簡單的網頁工具，這是運用 JavaScript 寫的時間顯示器，建議直接用他提供的 CDN 比較方便，只要改網址中的參數，就可以自訂 Style（樣式）與 Format（格式），

63 views03:14

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1436.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , ⚙️JavaScript , 🎬串流錄製】
因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #抓參數可指定間隔時間不斷重新載入指定網址 #抓參數 #指定間隔時間不斷重新載入 #重新載入指定網址 #重新載入 #OBS瀏覽器自動重載解決方案 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製

萌芽綜合天地

JavaScript 抓參數可指定間隔時間不斷重新載入指定網址（OBS 瀏覽器自動重載解決方案） – 萌芽綜合天地

因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也不支援指定時間不斷重新載入，因此我決定用純網頁前端的技術來自行製作 OBS 瀏覽器自動重載解決方案！簡單運用 JavaScript 抓取網址「?」後方之參數，我們可以將自訂的網址（url…

78 views20:18

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1467.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript , 📄jQuery】
自己還是喜歡寫網頁相關的教學，不管是什麼程式語言都沒有前端語言（HTML、CSS、JavaScript）來的習慣！只要沒有資訊安全的問題，前端可說是超級萬能...
#jQuery_qrcode #純前端生成QRCode #前端生成QRCode #QRCode #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

jQuery.qrcode：純前端生成 QR Code – 萌芽綜合天地

43 views12:50

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1469.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript , 📄jQuery】
前端除了能生成 QR Code，竟然還能掃描 QR Code？沒錯！只要運用 instascan 這個插件就可以運用 WebRTC 這樣的技術來做到掃描 QR Code...
#instascan #純前端 #純前端掃描QRCode #掃描QRCode #QRCode #WebRTC #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

instascan：純前端掃描 QR Code – 萌芽綜合天地

41 views14:23

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1472.html
【作者：萌芽站長；💻萌芽綜合天地；📷多媒體 , 🌐網站技術 , ⚙️JavaScript , ⚙️Node.js , 🖼靜圖處理 , ⚙️Gulp】
這篇是延伸篇文章，過去我所提供的範例與教學都只能壓縮處理附檔名為 .jpg 的圖檔，但其實 mozjpeg 是可以批次壓縮 .jpeg、.JPG 與 .JPEG 的圖檔...
#Node_js #jpg #jpeg #JPG #JPEG #通通不遺漏的進行壓縮 #Gulp #mozjpeg批次圖片壓縮 #mozjpeg #批次圖片壓縮 #延伸篇 #JavaScript #JS #多媒體 #網站技術 #靜圖處理

萌芽綜合天地

Node.js：jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮（Gulp、mozjpeg 批次圖片壓縮 – 延伸篇） – 萌芽綜合天地

這篇文章是《Node.js：Gulp 運行 imagemin-mozjpeg，mozjpeg 批次圖片壓縮》與《Node.js：建構路徑物件、自動監看執行、批次檔小技巧（Gulp、mozjpeg 批次圖片壓縮 – 延伸篇）》的延伸篇，過去我所提供的範例與教學都只能壓縮處理附檔名為 .jpg 的圖檔，但其實 mozjpeg 是可以批次壓縮 .jpeg、.JPG 與 .JPEG 的圖檔，

34 views06:19

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1537.html
【✨精選文章；作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📝HTML , ⚙️JavaScript , ⚙️jQuery , ⌨️架站程式 , 📝WordPress】
我在《WordPress 外掛推薦列表（2016、2017舊版）》這篇文章就有推薦 WordPress 外掛「WordPress Popular Posts」，這款外掛可以幫助網站主記錄每篇文章的流量...
#取得WordPress_Popular_Posts_REST_API_熱門文章資訊至任何網頁 #WordPress_Popular_Posts #WPP #REST_API #API #熱門文章 #AJAX取得JSON #AJAX #JSON #取得資料 #網站技術 #HTML #JavaScript #JS #jQuery #架站程式 #WordPress #WP

萌芽綜合天地

65 views04:32

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1547.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
JavaScript 有個內建的事件 DeviceOrientationEvent 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 transform 就可以做到翻轉裝置使圖片三維翻轉的效果...
#JavaScript #JS #HTML #CSS #transform #陀螺儀 #陀螺儀使圖片三維翻轉 #圖片三維翻轉 #圖片 #三維翻轉 #翻轉裝置 #網站技術 #DeviceOrientationEvent #事件 #DeviceOrientation #監聽

萌芽綜合天地

JavaScript & CSS 陀螺儀使圖片三維翻轉 – 萌芽綜合天地

JavaScript 有個內建的事件可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的就可以做到翻轉裝置使圖片三維翻轉的效果！當然這只是測試時好玩做出來的效果，實際上若結合指北、指南等，將可以做到更多應用！這邊簡單列出會用到的三個方向值：值為裝置水平放置時的 Z 軸動向，介於 0 ~ 360 度之間，可以想像裝置放在桌面上轉動（？）。值為裝置水平放置時的 X 軸動向，介於 -180 ~…

54 views13:54

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1569.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript , 📄jQuery】
好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式...
#利用自定義HTML屬性打造多國語言的靜態網頁 #自定義HTML屬性 #多國語言靜態網頁 #多國語言 #靜態網頁 #HTML #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

jQuery：利用自定義 HTML 屬性打造多國語言的靜態網頁 – 萌芽綜合天地

好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式，因此找了 GitHub 上不少慷慨工程師留下的原始碼，不過很多都有問題無法運作，排除掉複雜且有問題的資料後，最終一位來自伊朗的工程師的原始碼幫我完成了這次的研究，本文的前端開發基於它的靈感 👉 jq-multi-lang 首先，

51 views05:27

👍 2 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1573.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript】
這次試試是否能使用 JavaScript 就將 HTML 網頁上的區塊轉換成 JPG 圖檔，類似針對網頁局部截圖的概念，適合運用在將圖表、文字資訊等網頁上的資訊直接擷取...
#將HTML網頁上的區塊轉換成JPG圖檔 #HTML網頁 #網頁區塊 #區塊擷取成影像 #html2canvas #Canvas #JPG圖檔 #JPG #圖檔 #HTML #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：將 HTML 網頁上的區塊轉換成 JPG 圖檔 – 萌芽綜合天地

這次試試是否能使用 JavaScript 就將 HTML 網頁上的區塊轉換成 JPG 圖檔，類似針對網頁局部截圖的概念，適合運用在將圖表、文字資訊等網頁上的資訊直接擷取下來成圖檔。開發上只需要用到「html2canvas」這款 JavaScript 函式庫，它能將 HTML 元素轉換成 Canvas，接著再直接用瀏覽器幫忙轉換成 JPG 圖檔並給予品質（最差為 0，最佳為 1），最後自動導出並下載，

36 views15:59

👍 1 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1576.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript】
現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以...
#偵測系統色彩主題 #系統色彩主題 #深色模式 #淺色模式 #深色 #淺色 #黑暗模式 #明亮模式 #HTML #JavaScript #JS #網站技術 #prefers_color_scheme #dark #light

萌芽綜合天地

JavaScript：偵測系統深色模式/淺色模式 – 萌芽綜合天地

現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以抓取現在的模式，進而做到改變網頁內容／樣式。這在做網頁深色模式與淺色模式（或者說「黑暗模式」和「明亮模式」）上非常有幫助，使用者基本上不用自行切換，直接透過系統的偏好值顯示對於使用者來說最合適的色彩主題。

36 views05:09

👍 1 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1636.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript】
很久沒寫程式了！來複習 JavaScript Function (函數) 吧！這次來寫 BMI 計算的函數，大家都知道 BMI 計算公式是體重（公斤）除以身高（公尺）的平方...
#BMI計算 #BMI判斷 #BMI #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：BMI 計算 – 萌芽綜合天地

很久沒寫程式了！來複習 JavaScript Function (函數) 吧！這次來寫 BMI 計算的函數，大家都知道 BMI 計算公式是體重（公斤）除以身高（公尺）的平方，寫成算式為「體重[kg]÷(身高[m]X身高[m])」或「體重[kg]÷身高[m]2」，這邊次方要用 JS 的指數運算符號「**」來計算，才不會算錯，另外 .toFixed(1) 是取小數後面第幾位的方法，採用四捨五入，

27 views10:05

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1637.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript】
再來複習一次 JavaScript Function (函數)！這次是要輸入西元年來判斷是否為閏年，閏年指該年有 366 日（天），即較平常年份（平年）365 日多出一日...
#閏年判斷 #西元年份 #閏年 #西元 #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：閏年判斷 – 萌芽綜合天地

再來複習一次 JavaScript Function (函數)！這次是要輸入西元年來判斷是否為閏年，閏年指該年有 366 日（天），即較平常年份（平年）365 日多出一日，主要用來彌補因人為曆法規定的年度天數 365 日和實際地球公轉時間 365.25 日的差距而設立的。因此每四年便會累積出 1 日，所以四年便會有一次的閏年，那多出來的一天就是 2 月 29 日。

31 views11:02

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1735.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

自動隱藏且可直接使用的網頁回頂部按鈕 – 萌芽綜合天地

為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁 <head> 到 </head> 中先引入 jQuery 後即可直接使用。通常這種設計是為了方便讓使用者在看完網頁主要內容後，能快速回到最上面查看導覽列，若您的網站本身就設有固定於頂部的導覽列，可能就比較不需要這種設計。

30 views11:20

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1745.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript】
大家應該都知道在 JavaScript 中，只要簡單使用 .toString(2) 方法就能將十進位轉成二進位，但轉成二進位後要如何指定位數在左側補0以方便後續處理呢...
#十進位轉二進位指定位數補0 #十進位轉二進位 #十進位 #二進位 #指定位數補0 #指定位數 #補0 #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：十進位轉二進位指定位數補0 – 萌芽綜合天地

大家應該都知道在 JavaScript 中，只要簡單使用方法就能將十進位轉成二進位，但轉成二進位後要如何指定位數在左側補0以方便後續處理呢？站長找到了方法，能用指定的字串填充當下的字串至指定位數為止，如果需要的話會重複多次。對了！如果要補在右側也是可以的，只要使用方法即可。這邊給一個簡短的示範：輸出結果會是：十進位轉二進位指定16位數補0 = 0000000001111011…

18 views11:26

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1773.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript , 📄jQuery】
jQuery Validate 是一個歷史悠久的 jQuery 套件，始於西元 2006 年 7 月，因此有許多網站都有使用到這個套件，它可以幫助開發者設計表單欄位資料驗證方法...
#jQuery_Validate #簡單 #驗證表單欄位資料格式 #驗證表單欄位 #驗證表單 #解決方案 #HTML #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

jQuery Validate：簡單驗證表單欄位資料格式的解決方案 – 萌芽綜合天地

jQuery Validate 是一個歷史悠久的 jQuery 套件，始於西元 2006 年 7 月，因此有許多網站都有使用到這個套件，它可以幫助開發者設計表單欄位資料驗證方法，也能直接使用其預設的驗證格式，如：必填、指定字元長度、E-mail 格式、URL 格式、日期格式、資料一致性、整數等，且能在使用者輸入後及提交時提供相關提示文字，提升使用者體驗，由於是元老級的套件，

30 views10:58

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1776.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript , 📄jQuery】
jQuery 在很多地方簡寫了 JavaScript 的語法，讓開發者能在更短的行/字數中寫出一個功能出來，也能減少許多開發時間...
#replace #字串取代 #字串 #取代 #如何取代所有符合的字串 #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

jQuery：replace 字串取代示範、如何取代所有符合的字串？ – 萌芽綜合天地

jQuery 在很多地方簡寫了 JavaScript 的語法，讓開發者能在更短的行/字數中寫出一個功能出來，也能減少許多開發時間！這次就來用 jQuery 做一次字串取代示範，順便教大家用正規表示式的全域比對（g）來取代所有符合的字串！原始碼 HTML jQuery 輸出結果 CodePen See the Pen Untitled by Feng, Cheng-Chi (@qwe987299)…

26 views10:56

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1785.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript】
四分位數（Quartile）是把一串數據切成四個部分，每個部分含有 25%（1/4）的數據項目數，劃分的臨界點即為四分位...
#計算陣列的四分位數 #陣列 #四分位數 #Quartile #Q1 #Q2 #Q3 #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：計算陣列的四分位數 – 萌芽綜合天地

四分位數（Quartile）是把一串數據切成四個部分，每個部分含有 25%（1/4）的數據項目數，劃分的臨界點即為四分位數，它們的定義如下： Q 1 代表第一四分位數，即第25分位數。 Q2 代表第二四分位數，即第50分位數。 Q3 代表第三四分位數，即第75分位數。舉例來說，有串數據為 [1, 2, 3, 4, 5, 6, 7]，那麼其 Q1 是 2、Q2 是 4、Q3 是 6。

21 views10:34

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1859.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄JavaScript】
今天簡單教大家使用 JavaScript 將數字轉換為科學記號字串，也會反過來將科學記號字串再轉換為數字。首先我們先使用...
#科學記號與數字互相轉換 #科學記號 #數字 #轉換 #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：科學記號與數字互相轉換 – 萌芽綜合天地

今天簡單教大家使用 JavaScript 將數字轉換為科學記號字串，也會反過來將科學記號字串再轉換為數字。首先我們先使用 JS 內建的 toExponential() 方法，它能將數字轉換為科學記號字串，() 內的參數不一定要有，這是用來指定小數點後要留幾位數的。再來我們會用 Number() 方法將科學記號字串轉換為數字，這個方法本來的目的就是將字串轉換為數字，

27 views11:34

About

Blog

Apps

Platform