<?xml version="1.0" encoding="UTF-8" standalone="no"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" version="2.0">

<channel>
	<title>月光部落</title>
	<atom:link href="https://www.moonlol.com/feed" rel="self" type="application/rss+xml"/>
	<link>https://www.moonlol.com</link>
	<description>月亮下的碎碎唸唸</description>
	<lastBuildDate>Fri, 15 May 2026 07:38:30 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<itunes:explicit>no</itunes:explicit><copyright>Copyright © Moonlol.Com, All Rights Reserved.</copyright><itunes:image href="http://www.moonlol.com//mimages/a_moonlit.png"/><itunes:keywords>moon,月光,moonlol</itunes:keywords><itunes:summary>月光部落(Moonlol Blog)!誕生於2013年1月12日，開設博客是給個人，記下生活的點滴，生活的鎖碎事，寫下自己想說的話題，和一些很想寫的東西；隨心而發，隨想而寫，只要是認為值得記下的事，什麼亂七八糟的內容都會有一些。</itunes:summary><itunes:subtitle>月亮下的碎碎唸</itunes:subtitle><itunes:category text="Technology"><itunes:category text="Podcasting"/></itunes:category><itunes:author>Jack!</itunes:author><itunes:owner><itunes:email>hemu3q@gmail.com</itunes:email><itunes:name>Jack!</itunes:name></itunes:owner><item>
		<title>miniPaint圖片編輯器-繁體中文語言包</title>
		<link>https://www.moonlol.com/minipaint-online-image-editor-traditional-chinese-9048.html</link>
					<comments>https://www.moonlol.com/minipaint-online-image-editor-traditional-chinese-9048.html#respond</comments>
		
		
		<pubDate>Fri, 15 May 2026 07:38:29 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[技術文檔]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=9048</guid>

					<description><![CDATA[miniPaint 是一款基於 HTML5 的線上圖片編輯器(Online image editor or O [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>miniPaint 是一款基於 HTML5 的線上圖片編輯器(Online image editor or Online photo editor)，是一款類似 Photoshop 的圖像修改APP，該款開源的修圖程序，是無需安裝、可直接在瀏覽器中運行，打開即用，支持創建 / 編輯圖像、圖層、濾鏡、馬賽克、繪圖工具等功能。<span id="more-9048"></span></p>
<p>miniPaint 開發人員及貢獻者，暫時沒有繁體中文語系選擇，不過!本人自行製造了一份繁體中文 Traditional Chinese 語言包，供有需要的人士加入到程序中。</p>
<p><span style="color: #ff0000;"><strong>01.</strong></span> 請將 <strong>zhtw.json</strong> 語言包，放在 <strong>languages</strong> 目錄：</p>
<p><span style="color: #800080;"><strong>路徑：</strong></span>/src/js/languages</p>
<p><span style="color: #ff0000;"><strong>02.</strong></span> 請將 <strong>bundle.js</strong> 文件，放在 <strong>dist</strong> 目錄：</p>
<p><span style="color: #800080;"><strong>路徑：</strong></span>/dist/</p>
<p><span style="color: #ff0000;"><strong>03.</strong></span> 修改預設界面為中文：</p>
<p><span style="color: #0000ff;"><strong>路徑：</strong></span>/src/js/config.js</p>
<p>打開文件，其中 <strong>config.LANG</strong> 項，將 <strong>en</strong> 更改為 <strong>zh</strong> 或 <strong>zhtw</strong></p>
<p><strong>zh</strong> 為簡體中文 Chinese Simplified</p>
<p><strong>zhtw</strong> 為繁體中文 Chinese Traditional</p>
<p><span style="color: #800000;"><strong>miniPaint 繁體中文語言包：</strong></span><a href="https://e.pcloud.link/publink/show?code=XZLSciZbrL9p9zdHyVCF2hKW522gSwSWTRy" target="_blank" rel="noopener">下載-Download</a></p>
<p><strong>線上圖片編輯器：</strong><a href="https://www.ifreesite.com/photo/pixie" target="_blank" rel="noopener">ifreesite.com/photo/pixie</a></p>
<p><span style="color: #008000;"><strong>miniPaint 繁體中文(預覧)</strong></span></p>
<p><img decoding="async" src="https://i.imgur.com/tFXOwST.jpeg" /></p>
<p><strong>miniPaint 繁化歷程：</strong></p>


<pre class="wp-block-code"><code>"A problem occurred while removing undo history. It": "移除復原歷史記錄時發生問題。它",
"About": "關於",
"Active": "活動",
"Aden": "Aden",
"Advanced": "進階",
"All": "全部",
"Alpha": "透明度",
"Alpha:": "透明度：",
"Animation": "動畫",
"Anonymous": "匿名",
"Anti aliasing": "抗鋸齒",
"Application markup may have changed,": "應用標記可能已變更，",
"Arial": "Arial",
"Arrow": "箭頭",
"ArrowDown": "向下箭頭",
"ArrowLeft": "向左箭頭",
"ArrowRight": "向右箭頭",
"ArrowUp": "向上箭頭",
"Author:": "作者：",
"Auto Adjust Colors": "自動調整顏色",
"Auto Kerning": "自動字距微調",
"Auto select": "自動選擇",
"Average:": "平均值：",
"Backspace": "退格鍵",
"Base": "基礎",
"Basic": "基本",
"Black and White": "黑白",
"Blue": "藍色",
"Blue channel:": "藍色通道：",
"Blueprint": "藍圖",
"Blur": "模糊",
"Blur Radius:": "模糊半徑：",
"Blur Tool": "模糊工具",
"Blur power:": "模糊強度：",
"Borders": "邊框",
"Bottom": "底部",
"Bottom to Top": "由下至上",
"Bounds:": "邊界：",
"Box": "方框",
"Box Blur": "方框模糊",
"Box blur": "方框模糊",
"Brightness": "亮度",
"Brightness:": "亮度：",
"Brush": "畫筆",
"Bulge": "凸起",
"Bulge/Pinch Tool": "凸起/收縮工具",
"Burn": "加深",
"Can not animate 1 layer.": "無法對單一圖層進行動畫處理。",
"Can not find previous layer.": "找不到上一個圖層。",
"Can not use this tool on current layer: image already takes all area.": "無法在當前圖層上使用此工具：圖像已覆蓋整個區域。",
"Cancel": "取消",
"Canvas Size": "畫布尺寸",
"Center": "置中",
"Center x:": "居中x：",
"Center y:": "居中y：",
"Center:": "置中：",
"Change Composition": "變更組合",
"Change Layer Details": "變更圖層細節",
"Change Opacity": "變更不透明度",
"Channel:": "通道：",
"Circle": "圓形",
"Clarendon": "Clarendon",
"Clear": "清除",
"Clear Selection": "清除選取範圍",
"Clone": "複製",
"Clone Tool": "複製工具",
"Clone count:": "複製次數：",
"Clone tool disabled for resized image. Please rasterize first.": "對已調整大小的圖像禁用複製工具。請先柵格化。",
"Cloned edges": "複製邊緣",
"Close": "關閉",
"Color 1:": "顏色 1：",
"Color 2:": "顏色 2：",
"Color #": "顏色 #",
"Color Corrections": "色彩校正",
"Color Palette": "調色盤",
"Color Zoom": "色彩縮放",
"Color alpha value can not be zero.": "色彩的 Alpha 透明值不能為零。",
"Color to Alpha": "色彩轉換為透明",
"Color zoom": "色彩縮放",
"Color:": "顏色：",
"Colors": "顏色",
"Colors:": "顏色：",
"Common Filters": "常用濾鏡",
"Composition": "組合",
"Composition:": "組合：",
"Content Fill": "內容填滿",
"Contiguous": "連續",
"Contrast": "對比度",
"Contrast:": "對比度：",
"Convert layer to raster": "圖層轉換為點陣圖",
"Convert to Raster": "轉換為點陣圖",
"Copy Selection": "複製選取範圍",
"Copy to Clipboard": "複製至剪貼簿",
"Courier": "Courier",
"Crop": "裁切",
"Crop Tool": "裁切工具",
"Crop on rotated layer is not supported. Convert it to raster to continue.": "不支援在旋轉圖層上裁切。請先轉換為點陣圖以繼續。",
"Ctrl + C": "Ctrl + C",
"Ctrl+A": "Ctrl+A",
"Ctrl+C": "Ctrl+C",
"Ctrl+P": "Ctrl+P",
"Ctrl+V": "Ctrl+V",
"Ctrl+Y": "Ctrl+Y",
"Ctrl+Z": "Ctrl+Z",
"Current": "當前",
"Current Color Preview": "當前顏色預覽",
"Custom": "自訂",
"Data URL": "數據 URL",
"Data URL:": "數據 URL：",
"Decrease": "降低",
"Decrease Color Depth": "降低色彩深度",
"Degree:": "角度：",
"Del": "刪除",
"Delay:": "延遲：",
"Delete": "刪除",
"Delete Selection": "刪除選取範圍",
"Denoise": "降噪",
"Desaturate Tool": "去飽和工具",
"Description:": "描述：",
"Deutsch": "德語",
"Differences": "差異",
"Differences Down": "差異縮小",
"Direction:": "方向：",
"Dither": "抖動",
"Dithering:": "抖動：",
"Dominant color:": "主色調：",
"Dot Screen": "點陣",
"Down": "向下",
"Duplicate": "複製",
"Duplicate Layer": "複製圖層",
"Duplicate layer": "複製圖層",
"Dynamic": "動態",
"Edge": "邊緣",
"Edit": "編輯",
"Edit text...": "編輯文字...",
"Effect browser": "特效瀏覽器",
"Effects": "特效",
"Effects browser": "特效瀏覽器",
"Email:": "電子郵件：",
"Emboss": "浮雕",
"Empty selection": "清空選取範圍",
"Empty selection or type not image.": "清空選取範圍或未輸入圖像。",
"Enable autoresize:": "啟用自動調整大小：",
"End": "結束",
"English": "英語",
"English (UK)": "英語（英國）",
"Enrich": "增強",
"Enter": "輸入",
"Erase Tool": "擦除工具",
"Erase on rotate object is disabled. Please rasterize first.": "禁用旋轉對象上的擦除。請先點陣化。",
"Error": "錯誤",
"Error connecting to service.": "連線至服務時發生錯誤。",
"Error loading the list of fonts from Google.": "載入 Google 字型清單時發生錯誤。",
"Error registering service worker": "註冊服務工作者時發生錯誤",
"Error: can not find filter:": "錯誤：無法找到濾鏡：",
"Error: can not find layer with id:": "錯誤：無法找到帶有 ID 的圖層：",
"Error: missing details event target": "錯誤：缺少詳細資訊事件目標",
"Error: unknown layer type:": "錯誤：未知的圖層類型：",
"Error: unsupported attribute type:": "錯誤：不支持的屬性類型：",
"Esc": "退出",
"Escape": "逃脫",
"Español": "西班牙語",
"Expand edges": "擴展邊緣",
"Exponent:": "指數：",
"Export": "匯出",
"External": "外部",
"Erase": "擦除",
"Factor:": "因子：",
"File": "檔案",
"File name:": "檔案名稱：",
"File size:": "檔案大小：",
"Fill": "填滿",
"Fill:": "填滿：",
"Fill Tool": "填滿工具",
"Fit": "適配",
"Fit Window": "適配視窗",
"Fit window": "適配視窗",
"Flatten Image": "平面影像",
"Flip": "翻轉",
"FloydSteinberg-serpentine": "FloydSteinberg-蛇形",
"Font": "字型",
"Font:": "字型：",
"Français": "法語",
"Full HD, 1080p": " 全高清，1080p",
"Full Screen": "全螢幕",
"Full layers data": "全層數據",
"Gap:": "間距：",
"Gaussian Blur": "高斯模糊",
"Gif delay:": "GIF 延遲：",
"Gingham": "方格",
"GitHub:": "GitHub：",
"Gradient": "漸層工具",
"Gradient Radius:": "漸層半徑：",
"Grains": "顆粒",
"Graphics Interchange Format": "圖形交換格式",
"Gray": "灰色",
"Grayscale": "灰階",
"Greek": "希臘語",
"Green": "綠色",
"Green channel:": "綠色通道：",
"Greyscale:": "灰階：",
"Grid": "網格",
"Grid on/off": "網格開啟/關閉",
"Guides": "參考線",
"Guides enabled.": "參考線已啟用。",
"H Radius:": "水平半徑：",
"H. Align:": "水平對齊：",
"Heatmap": "熱力圖",
"Height (%):": "高度（%）：",
"Height:": "高度：",
"Help": "幫助",
"Helvetica": "黑體",
"Hermite": "Hermite",
"Hex": "十六進位",
"Hide": "隱藏",
"Histogram": "直方圖",
"Histogram:": "直方圖：",
"Home": "主頁",
"Horizontal": "水平",
"Horizontal Alignment": "水平對齊",
"Horizontal blur:": "水平模糊：",
"Horizontal:": "水平：",
"Hue": "色相",
"Hue Rotate": "色相旋轉",
"Hue:": "色相：",
"Image": "圖像",
"Image data with multi-layers. Can be opened using miniPaint -": "圖像數據帶有多層。可使用 MiniPaint 開啟 -",
"Impact": "影響",
"In proportion:": "等比例：",
"Increase": "增加",
"Information": "資訊",
"Inkwell": "墨井",
"Insert": "插入",
"Insert guides": "插入參考線",
"Insert new layer": "插入新圖層",
"Instagram Filters": "Instagram 濾鏡",
"Invalid Hex Code": "無效的十六進位碼",
"Italiano": "意大利語",
"JPG/JPEG Format": "JPG / JPEG 格式",
"Kerning:": "字距：",
"Key-Points": "關鍵點",
"KeyU": "U 鍵",
"Keyboard Shortcuts": "鍵盤快捷鍵",
"Keyword:": "關鍵字：",
"Lanczos": "Lanczos",
"Landscape": "橫向",
"Language": "語言",
"Last modified": "最後修改",
"Layer": "圖層",
"Layer details": "圖層詳細資訊",
"Layer is empty.": "圖層為空。",
"Layer is not compatible with resize": "圖層不相容於調整大小",
"Layer is vector, convert it to raster to apply this tool.": "圖層為向量圖，請轉換為點陣圖以應用此工具。",
"Layers": "圖層",
"Layers:": "圖層：",
"Layout:": "版面配置：",
"Leading:": "行距：",
"Left": "左",
"Left to Right": "由左至右",
"Level:": "層級：",
"Levels:": "層級：",
"Lietuvių": "立陶宛語",
"Lo-fi": "低保真",
"Luminance:": "亮度：",
"Luminosity": "光度",
"Magic Eraser Tool": "魔術橡皮擦工具",
"Merge Down": "向下合併",
"Merge Layers": "合併圖層",
"Merged": "合併",
"Metrics": "指標",
"Middle": "居中",
"Missing at least 1 size parameter.": "缺少至少 1 個尺寸參數。",
"Missing permissions to write to Clipboard.cc": "缺少寫入 Clipboard.cc 的權限",
"Mode:": "模式：",
"Module function not found.": "未找到模組功能。",
"Modules class not found:": "未找到模組類：",
"Monospace": "等寬字型",
"Mosaic": "馬賽克",
"Mouse:": "鼠標：",
"Move": "移動",
"Move Layer": "移動圖層",
"Move layer down": "向下移動圖層",
"Move layer up": "向上移動圖層",
"Name:": "名稱：",
"Negative": "負片",
"New": "新建",
"New Bezier Layer": "新貝茲曲線圖層",
"New Brush Layer": "新畫筆圖層",
"New Ellipse Layer": "新橢圓圖層",
"New File": "新建檔案",
"New Gradient Layer": "新漸層圖層",
"New Layer": "新建圖層",
"New Line Layer": "新線條圖層",
"New Pencil Layer": "新鉛筆圖層",
"New Polygon Layer": "新多邊形圖層",
"New Rectangle Layer": "新矩形圖層",
"New Text Layer": "新文字圖層",
"New file": "新建檔案",
"New from Selection": "從選取範圍新建",
"New layer": "新建圖層",
"Next": "下一個",
"Night Vision": "夜視",
"None": "無",
"Nothing is selected.": "未選取任何項目。",
"Offset X:": "X偏移：",
"Offset Y:": "Y偏移：",
"Oil": "油畫",
"Ok": "確定",
"Online image editor.": "線上圖像編輯器。",
"Opacity": "不透明度",
"Opacity:": "不透明度：",
"Open": "開啟",
"Open Data URL": "開啟數據URL",
"Open Directory": "開啟目錄",
"Open File": "開啟檔案",
"Open File Data URL": "開啟數據URL檔案",
"Open File URL": "開啟檔案網址",
"Open File Webcam": "開啟網絡攝影機檔案",
"Open Image": "開啟圖像",
"Open JSON File": "開啟JSON檔案",
"Open Test Template": "開啟測試範本",
"Open URL": "開啟網址",
"Open data URL": "開啟數據URL",
"Open from Webcam": "從視訊鏡頭開啟",
"Original Size": "原始尺寸",
"PNGTOSVG - Convert Image to SVG": "PNGTOSVG - 將圖像轉換為SVG格式",
"PageDown": "下一頁",
"PageUp": "上一頁",
"Palette": "調色盤",
"Parameter #1:": "參數1：",
"Parameter #2:": "參數2：",
"Paste": "貼上",
"Pencil": "鉛筆工具",
"Percentage:": "百分比：",
"Pick color": "色彩選擇器",
"Pixels:": "像素：",
"Placeholder comment for color channels": "色彩通道的佔位符註解",
"Placeholder comment for color picker": "色彩選擇器的佔位符註解",
"Placeholder comment for color swatches": "色彩樣本的佔位符註解",
"Play": "播放",
"Portable Network Graphics": "便攜式網絡圖形",
"Portrait": "縱向",
"Português": "葡萄牙語",
"Position:": "位置：",
"Power:": "強度：",
"Preview": "預覽",
"Previous": "上一個",
"Previous layer must be image, convert it to raster to apply this tool.": "上一個圖層必須為圖像，請轉換為點陣圖以應用此工具。",
"Print": "列印",
"Quality:": "品質：",
"Quick Load": "快速載入",
"Quick Save": "快速儲存",
"REMOVE.BG - Remove Image Background": "REMOVE.BG - 移除圖像背景",
"Radial": "徑向",
"Radial gradient": "徑向漸層",
"Radius:": "半徑：",
"Range:": "範圍：",
"Red": "紅色",
"Red channel:": "紅色通道：",
"Redo": "重做",
"Remove all": "全部移除",
"Rename": "重新命名",
"Rename Layer": "重新命名圖層",
"Rendered with errors.": "渲染時出現錯誤。",
"Rendering...": "渲染中...",
"Replace Color": "替換顏色",
"Replace color": "替換顏色",
"Replacement:": "替換：",
"Report Issues": "回報問題",
"Reset": "重設",
"Resize": "調整大小",
"Resize Boundary": "調整邊界大小",
"Resize Layer": "調整圖層大小",
"Resize Layers": "調整多個圖層大小",
"Resize Text Layer": "調整文字圖層大小",
"Resized as background": "調整為背景",
"Resized:": "調整大小：",
"Resolution:": "解析度：",
"Restore Alpha": "還原透明度",
"Right": "右",
"Right angle:": "直角：",
"Right to Left": "由右至左",
"Rotate": "旋轉",
"Rotate Layer": "旋轉圖層",
"Rotate is not supported on this type of object. Convert to raster?": "此類型物件不支援旋轉。要轉換為點陣圖？",
"Rotate left": "向左旋轉",
"Rotate:": "旋轉：",
"Ruler": "尺規",
"SQUOOSH - Compress and Compare Images": "SQUOOSH - 壓縮與比較圖像",
"Saturate": "飽和度",
"Saturation": "飽和度",
"Saturation:": "飽和度：",
"Save As": "另存為",
"Save As Data URL": "另存為數據URL",
"Save as": "另存為",
"Save as type:": "另存為類型：",
"Save layers:": "儲存圖層：",
"Scaling up is not supported in Hermite, using Lanczos.": "Hermite不支持放大，請使用Lanczos。",
"Scroll down": "向下捲動",
"Scroll up": "向上捲動",
"Search": "搜尋",
"Search Images": "搜尋圖像",
"Search for Font": "搜尋字型",
"Search:": "搜尋：",
"Select All": "全選",
"Select Text Layer": "選取文字圖層",
"Select object tool": "選取物件工具",
"Selected": "已選取",
"Selection": "選取範圍",
"Selection Tool": "選取工具",
"Sensitivity:": "靈敏度：",
"Separated": "分離",
"Separated (original types)": "分離（原始類型）",
"Sepia": "棕褐色",
"Set Image Size": "設置圖像尺寸",
"Settings": "設置",
"Shadow": "陰影",
"Shapes": "形狀",
"Shapes (H)": "形狀 (H)",
"Sharpen": "銳化",
"Sharpen Tool": "銳化工具",
"Sharpen:": "銳化：",
"Shift + S": "Shift + S",
"Shortcut Key:": "快捷鍵：",
"Show": "顯示",
"Show \/ Hide": "顯示 \/ 隱藏",
"Show file size:": "顯示檔案大小：",
"Simple": "簡易",
"Size is too big, max": "尺寸太大，最大值為",
"Size:": "尺寸：",
"Skip - layer must be image.": "跳過 - 圖層必須是圖像。",
"Solarize": "曝光反轉",
"Sorry, cold not load getUserMedia() data:": "抱歉，無法載入 getUserMedia() 數據:",
"Sorry, image could not be loaded.": "抱歉，無法載入圖片。",
"Sorry, image could not be loaded. Try copy image and paste it.": "抱歉，圖片無法載入。請嘗試複製圖像並貼上。",
"Sorry, image is too big, max 5 MB.": "抱歉，圖片太大，最大值為 5 MB。",
"Source coordinates saved.": "來源座標已儲存。",
"Source is empty, right click on image or use long press to save source position.": "來源為空，請在圖片上按右鍵或長按以儲存來源位置。",
"Source layer:": "來源圖層：",
"Sprites": "圖像精靈",
"Square": "正方形",
"Stream:": "串流：",
"Strength:": "強度：",
"Strict": "嚴格",
"Stroke size:": "線條粗細：",
"TINYPNG - Compress PNG and JPEG": "TINYPNG - 壓縮PNG和JPEG",
"Tab": "標籤",
"Tag Image File Format": "標記圖像檔案格式",
"Tahoma": "Tahoma",
"Target:": "目標：",
"The quick brown fox jumps over the lazy dog.": "敏捷的棕色狐貍跳過了懶狗。",
"There": "那裡",
"There are no layers behind.": "背後沒有圖層。",
"There is only 1 layer.": "只有 1 個圖層。",
"This layer must contain an image. Please convert it to raster to apply this tool.": "此圖層必須包含圖像。請將其轉換為點陣圖以應用此工具。",
"Tilt Shift": "視角移位",
"Times New Roman": "Times New Roman",
"Toaster": "Toaster",
"Toggle": "切換",
"Toggle Color Channels": "切換色彩通道",
"Toggle Color Picker": "切換取色器",
"Toggle Menu": "切換選單",
"Toggle Swatches": "切換樣本",
"Tools": "工具",
"Top": "頂部",
"Top to Bottom": "由上至下",
"Total pixels:": "總像素數：",
"Translate": "翻譯",
"Translate Layer": "翻譯圖層",
"Translate error, can not find dictionary:": "翻譯錯誤，找不到字典：",
"Transparent:": "透明：",
"Trim": "修剪",
"Trim Layers": "修剪圖層",
"Trim borders:": "修剪邊框：",
"Trim layer:": "修剪圖層：",
"Trim white color?": "修剪白色部分？",
"Text": " 文字工具",
"Type:": "類型：",
"Türkçe": "土耳其語",
"Undo": "復原",
"Unique colors:": "唯一顏色：",
"Up": "向上",
"Update": "更新",
"Update Brush Layer": "更新畫筆圖層",
"Update Pencil Layer": "更新鉛筆圖層",
"Update guides": "更新指南",
"Use Ctrl+V keyboard shortcut to paste from Clipboard.": "使用 Ctrl+V 快捷鍵從剪貼簿貼上。",
"V Radius:": "垂直半徑：",
"V. Align:": "垂直對齊：",
"Valencia": "Valencia",
"Verdana": "Verdana",
"Version:": "版本：",
"Vertical": "垂直",
"Vertical Alignment": "垂直對齊",
"Vertical blur:": "垂直模糊：",
"Vertical:": "垂直：",
"Vibrance": "飽和度",
"View": "視圖",
"Vignette": "暈影",
"ViliusL": "ViliusL",
"Vintage": "復古",
"Webcam": "網路攝影機",
"Webcam #": "網路攝影機 #",
"Website:": "網站：",
"Weppy File Format": "Weppy 檔案格式",
"Width (%):": "寬度（%）：",
"Width:": "寬度：",
"Windows Bitmap": "Windows 點陣圖",
"Word": "單詞",
"Word + Letter": "單詞 + 字母",
"Wrap At:": "在此處換行：",
"Wrap:": "自動換行：",
"Wrong dimensions": "尺寸錯誤",
"Wrong file type, must be image or json.": "檔案類型錯誤，必須是圖像或JSON。",
"X end:": "X 結束：",
"X position:": "X 位置：",
"X start:": "X 開始：",
"X-Pro II": "X-Pro II",
"Y end:": "Y 結束：",
"Y position:": "Y 位置：",
"Y start:": "Y 開始：",
"You can also drag and drop items into browser.": "您也可以將項目拖放到瀏覽器中。",
"Your browser does not support canvas or JavaScript is not enabled.": "您的瀏覽器不支持畫布或 JavaScript 未啟用。",
"Your browser does not support this format.": "您的瀏覽器不支持此格式。",
"Your search did not match any images.": "您的搜尋沒有符合的圖片。",
"Zoom": "縮放",
"Zoom Blur": "縮放模糊",
"Zoom In": "放大",
"Zoom Out": "縮小",
"Zoom blur": "縮放模糊",
"Zoom in": "放大",
"Zoom out": "縮小",
"Zoom:": "縮放："</code></pre>
]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/minipaint-online-image-editor-traditional-chinese-9048.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>走路及跑步和行山(登山)公里分數計算器</title>
		<link>https://www.moonlol.com/calculator-walking-time-hiking-fraction-9007.html</link>
					<comments>https://www.moonlol.com/calculator-walking-time-hiking-fraction-9007.html#respond</comments>
		
		
		<pubDate>Sun, 10 May 2026 09:04:23 +0000</pubDate>
				<category><![CDATA[網路資源]]></category>
		<category><![CDATA[線上工具]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=9007</guid>

					<description><![CDATA[身心注重健康愛運動的你知不知道 1 公里要走多少時間，或 1 小時又能走多少公里，在市區跑和在山上跑或在陡峭地 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>身心注重健康愛運動的你知不知道 1 公里要走多少時間，或 1 小時又能走多少公里，在市區跑和在山上跑或在陡峭地形走，平路和山路的跑步時間相差多少，喜歡大自然，每逄周未登山(行山)的人士，每一次!看到路牌標誌的公里KM，所需的分數時間，又是如何計算得到準確的時分鐘。<span id="more-9007"></span></p>
<p>根據 Google Map 地圖，在平地以正常速度行走，我們走 1 公里，大概 15 分鐘。即 4 公里的路線距離，需要 1 小時才能走完。日行萬步，大概走個 1 小時 20 分鐘，就能走到 1 萬步；或者跑個 7 公里，就 40 分鐘搞定。</p>
<p><img decoding="async" src="https://i.imgur.com/vbm5fjy.jpeg" /></p>
<p><span style="color: #ff0000;"><strong>註:</strong> </span>公尺 --&gt; 米 --&gt; M</p>
<p>若是依照「Naismith's Rule」中文: 尼史密夫定律 / 奈史密斯法則 / 史密斯定律，估算的行山(登山)公式，基於 1 小時行走 4 公里(平地)，並每上升 500 公尺額外增加 1 小時的體力消耗。</p>
<p><strong>基本計算為：</strong>總時間 = (平地距離 ÷ 4) + (上升高度 ÷ 500) 小時，下山若陡峭通常亦需額外加時間。</p>
<p><span style="color: #800080;"><strong>尼史密夫定律計算公式：</strong></span></p>
<p><img decoding="async" src="https://i.imgur.com/h6VUZNb.jpeg" /></p>
<p><strong>PDF 文件：</strong><a href="https://www.bbhk.org.hk/pages/chs/uniformed-group-services-teaching-resources-resources/51%20%E9%81%A0%E8%B6%B3%E4%BA%8C%E7%B4%9A4_%E5%9C%B0%E5%9C%96%E9%96%B1%E8%AE%80.pdf" target="_blank" rel="noopener">登山(行山)距離與面積計算</a></p>
<p><span style="color: #800080;"><strong>基本時間單位：</strong></span></p>
<p><strong>水平速度：</strong> 每小時 4 公里。</p>
<p><strong>爬升速度：</strong> 每上升 500 公尺（約 25 條 20 米等高線），增加 1 小時。</p>
<p><strong>下降時間：</strong> 一般情況下，每下降 300-500 公尺可看作與同等距離平地，或每下降 20 米等高線增加 2 分鐘。</p>
<p><span style="color: #800080;"><strong>01. 計算範例一：</strong></span></p>
<p>假設徒步距離為 8 公里，需上升 400 公尺。</p>
<p><strong>平地時間：</strong> 8 公里 ÷ 4 = 2 小時</p>
<p><strong>上升時間：</strong> 400 公尺 ÷ 500 = 0.8 小時（0.8 x 60 即 48 分鐘）</p>
<p><strong>總時間：</strong> 2 + 0.8 = 2.8 小時（約 2 小時 48 分鐘）</p>
<p><span style="color: #800080;"><strong>02. 計算範例二：</strong></span></p>
<p>為了更容易明白，以分成三部份講。</p>
<p><strong>一：行走距離</strong></p>
<p>每 1 小時，行走 4 公里，即是每 15 分鐘，行走 1 公里。</p>
<p><strong>二：上升高度</strong></p>
<p>每 1 小時，攀升 500 公尺，即是每 2.4 分鐘，攀升 20 公尺。</p>
<p><strong>三：下降高度</strong></p>
<p>每半小時，下降 500 公尺，即是每 1.2 分鐘，下降 20 公尺。</p>
<p><strong>如要行走 1 公里，上 40 公尺，下 20 公尺，即等於：</strong></p>
<p>15 分鐘 + 2.4 x 2 分鐘 + 1.2 分鐘</p>
<p>= 21 分鐘</p>
<p><span style="color: #ff0000;"><strong>注意：</strong></span></p>
<p>公式只是一個約數，還未包含休息時間。需要根據個人體能、負重、路況、地形崎嶇程度及天氣狀況調整。</p>
<p>如果!你計數不精，可以使用線上工具。</p>
<p><span style="color: #008000;"><strong>走路計算機：</strong></span><a href="https://www.ifreesite.com/calculatortool/walking-time-calculator.htm" target="_blank" rel="noopener">ifreesite.coml/walking-time</a></p>
<p><span style="color: #008000;"><strong>科學計算機：</strong></span><a href="https://www.ifreesite.com/calculatortool/calculate.htm" target="_blank" rel="noopener">ifreesite.com/calculatortool</a></p>
<p><img decoding="async" src="https://i.imgur.com/piXESHb.png" /></p>
<p>很多時候我們行山(登山)走山路，都會看見一些路標，告訴我們這一段路程，還需要走多少公里，行程用到多少時間，可能會以分數，即幾分之幾的時間。</p>
<p><strong>如下圖：</strong>大埔滘林徑</p>
<p><span style="color: #ff0000;">紅路:</span> 3 公里km，3/4 小時hr</p>
<p><span style="color: #0000ff;">藍路:</span> 4 公里km，1又1/4 小時hr</p>
<p><span style="color: #800000;">啡路:</span> 7 公里km，2又1/2 小時hr</p>
<p><span style="color: #adad0e;">黃路:</span> 10公里km，3又1/2 小時hr</p>
<p>- 以 <span style="color: #ff0000;">紅路 </span>的計算時間：3 ÷ 4 x 60 = 45 分鐘</p>
<p>- 以 <span style="color: #800000;"><span style="color: #adad0e;">黃路:</span></span>的計算時間：將帶分數化成假分數，即 3 x 2 + 1 = 7 變成 7/2。再 7 ÷ 2 x 60 = 210 分鐘。然後 210 ÷ 60 = 3.5 小時（0.5 x 60 即需要 3小時30分鐘）</p>
<p>如果!你計算不精，可以使用線上工具。</p>
<p><span style="color: #008000;"><strong>分數計算機：</strong></span><a href="https://www.ifreesite.com/calculatortool/fraction.htm" target="_blank" rel="noopener">ifreesite.com/fraction.htm</a></p>
<p><span style="color: #008000;"><strong>科學計算機：</strong></span><a href="https://www.ifreesite.com/calculatortool/calculate.htm" target="_blank" rel="noopener">ifreesite.com/calculatortool</a></p>
<p><img decoding="async" src="https://i.imgur.com/s5lGTKZ.jpeg" /></p>
<p><div class="mo-post-and">相關文章：<br />
01. <a href="https://www.moonlol.com/html5-mathml-fraction-8953.html" target="_blank" rel="noopener">HTML5 MathML分數的分子分母及帶分數</a></div></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/calculator-walking-time-hiking-fraction-9007.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator><enclosure length="915242" type="application/pdf" url="https://www.bbhk.org.hk/pages/chs/uniformed-group-services-teaching-resources-resources/51%20%E9%81%A0%E8%B6%B3%E4%BA%8C%E7%B4%9A4_%E5%9C%B0%E5%9C%96%E9%96%B1%E8%AE%80.pdf"/><itunes:explicit>no</itunes:explicit><itunes:subtitle>身心注重健康愛運動的你知不知道 1 公里要走多少時間，或 1 小時又能走多少公里，在市區跑和在山上跑或在陡峭地 [&amp;#8230;]</itunes:subtitle><itunes:author>Jack!</itunes:author><itunes:summary>身心注重健康愛運動的你知不知道 1 公里要走多少時間，或 1 小時又能走多少公里，在市區跑和在山上跑或在陡峭地 [&amp;#8230;]</itunes:summary><itunes:keywords>moon,月光,moonlol</itunes:keywords></item>
		<item>
		<title>CSS金字塔Pyramid</title>
		<link>https://www.moonlol.com/css-pyramid-pyramidal-grid-8990.html</link>
					<comments>https://www.moonlol.com/css-pyramid-pyramidal-grid-8990.html#respond</comments>
		
		
		<pubDate>Sat, 09 May 2026 10:21:02 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[CSS]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8990</guid>

					<description><![CDATA[純 CSS 製作分層金字塔，CSS Pyramid or CSS Pyramidal Grid 畫出直立金字塔 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>純 CSS 製作分層金字塔，CSS Pyramid or CSS Pyramidal Grid 畫出直立金字塔，倒轉金字塔以及上下正反金字塔，內容也有如何改變圖表的大小、顏色以及金字塔中的步驟。 <span id="more-8990"></span></p>
<p>想要製作不同階層的圖形，需要使用 Transform 標籤，能夠實現將不同的物件及框架，向水平方向反轉或垂直方向反轉。</p>
<p><strong>水平反轉（左右翻轉）</strong><br />transform: translateX(-1);</p>
<p><strong>垂直反轉（上下翻轉）</strong><br />transform: translateY(-1);</p>
<p><strong>水平反轉（左右翻轉）</strong><br />transform: scaleX(-1);</p>
<p><strong>垂直反轉（上下翻轉）</strong><br />transform: scaleY(-1);</p>
<p><span style="color: #800000;"><strong>CSS 分層金字塔:</strong></span></p>
<p><strong><span style="color: #ff0000;">01.</span> 立式金字塔</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-1a {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section {
  flex: 1 1 100%;
  background-color: green;
  margin-bottom: 2px;
}

.pyramid__section:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section:hover {
  background-color: yellow;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="pyramid-1a"&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">02.</span> 倒轉金字塔</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-1b {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  transform: scaleY(-1);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section {
  flex: 1 1 100%;
  background-color: green;
  margin-bottom: 2px;
}

.pyramid__section:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section:hover {
  background-color: yellow;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="pyramid-1b"&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">03.</span> 正反金字塔</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.inverted-pyramid-1a {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.inverted-pyramid-1b {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 180px;
  transform: scaleY(-1);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pyramid__section_s {
  flex: 1 1 100%;
  background-color: green;
  /* margin-bottom: 2px; 中間空隙 */
}

.pyramid__section_s:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section_s:hover {
  background-color: yellow;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="inverted-pyramid-1a"&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="inverted-pyramid-1b"&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
  &lt;div class="pyramid__section_s"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">04.</span> 立式金字塔 (文字+多彩)</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-2a {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
}

/* EDIT Use grid to vertically center text */
.pyramid-2a div {
  display: grid;
  align-items: center;
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="pyramid-2a"&gt;
  &lt;div class="one"&gt;Hello&lt;/div&gt;
  &lt;div class="two"&gt;World&lt;/div&gt;
  &lt;div class="three"&gt;Foo&lt;/div&gt;
  &lt;div class="four"&gt;Bar&lt;/div&gt;
  &lt;div class="five"&gt;Baz&lt;/div&gt;
  &lt;div class="six"&gt;Qux&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">05.</span> 倒轉金字塔 (文字+多彩)</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-2b {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
  transform: scaleY(-1);
}

/* EDIT Use grid to vertically center text */
.pyramid-2b div {
  display: grid;
  align-items: center;
  transform: scaleY(-1);
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="pyramid-2b"&gt;
  &lt;div class="one"&gt;Hello&lt;/div&gt;
  &lt;div class="two"&gt;World&lt;/div&gt;
  &lt;div class="three"&gt;Foo&lt;/div&gt;
  &lt;div class="four"&gt;Bar&lt;/div&gt;
  &lt;div class="five"&gt;Baz&lt;/div&gt;
  &lt;div class="six"&gt;Qux&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">06.</span> 正反金字塔 (文字+多彩)</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.inverted-pyramid-2a {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
}

/* EDIT Use grid to vertically center text */
.inverted-pyramid-2a div {
  display: grid;
  align-items: center;
}

.inverted-pyramid-2b {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vmin;
  color: white;
  text-align: center;
  transform: scaleY(-1);
}

/* EDIT Use grid to vertically center text */
.inverted-pyramid-2b div {
  display: grid;
  align-items: center;
  transform: scaleY(-1);
}

.one {
  background-color: #EA1B07;
}

.two {
  background-color: #F4B600;
}

.three {
  background-color: #F9E029
}

.four {
  background-color: #049DFC
}

.five {
  background-color: #A77643;
}

.six {
  background-color: #5CD533;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="inverted-pyramid-2a"&gt;
  &lt;div class="one"&gt;先生&lt;/div&gt;
  &lt;div class="two"&gt;小姐&lt;/div&gt;
  &lt;div class="three"&gt;學生&lt;/div&gt;
  &lt;div class="four"&gt;男女&lt;/div&gt;
  &lt;div class="five"&gt;貓狗&lt;/div&gt;
  &lt;div class="six"&gt;鳥兒&lt;/div&gt;
&lt;/div&gt;
&lt;div class="inverted-pyramid-2b"&gt;
  &lt;div class="one"&gt;先生&lt;/div&gt;
  &lt;div class="two"&gt;小姐&lt;/div&gt;
  &lt;div class="three"&gt;學生&lt;/div&gt;
  &lt;div class="four"&gt;男女&lt;/div&gt;
  &lt;div class="five"&gt;貓狗&lt;/div&gt;
  &lt;div class="six"&gt;鳥兒&lt;/div&gt;
&lt;/div&gt;</code></pre>


<p><strong><span style="color: #ff0000;">07.</span> 立式金字塔 (ul+ol+li)</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-3a {
    position: relative;
    padding: 0px;
    margin: 0px auto;
    width: calc(8em * 5);
    list-style: none;
    font-size: 1.4vw;
}
.pyramid-3a &gt; li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
.pyramid-3a &gt; li + li {
    border-top: 2px solid #fff;
}
.pyramid-3a &gt; li::before {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-position: top -2px left 1px, top -2px right 1px;
    background-size: 50% calc(6em * 5);
    background-repeat: no-repeat;
    content: "";
}
.pyramid-3a &gt; li:nth-of-type(1)::before {
    z-index: -1;
    height: calc(6em * 1);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #85b8ea 50%),
        linear-gradient(to bottom left, transparent 50%, #85b8ea 50%);
}
.pyramid-3a &gt; li:nth-of-type(2)::before {
    z-index: -2;
    height: calc(6em * 2);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #73ade7 50%),
        linear-gradient(to bottom left, transparent 50%, #73ade7 50%);
}
.pyramid-3a &gt; li:nth-of-type(3)::before {
    z-index: -3;
    height: calc(6em * 3);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #62a3e4 50%),
        linear-gradient(to bottom left, transparent 50%, #62a3e4 50%);
}
.pyramid-3a &gt; li:nth-of-type(4)::before {
    z-index: -4;
    height: calc(6em * 4);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #5199e1 50%),
        linear-gradient(to bottom left, transparent 50%, #5199e1 50%);
}
.pyramid-3a &gt; li:nth-of-type(5)::before {
    z-index: -5;
    height: calc(6em * 5);
    background-image:
        linear-gradient(to bottom right, transparent 50%, #3388dd 50%),
        linear-gradient(to bottom left, transparent 50%, #3388dd 50%);
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;ol class="pyramid-3a"&gt;
    &lt;li&gt;王&lt;/li&gt;
    &lt;li&gt;王直属護衛軍&lt;/li&gt;
    &lt;li&gt;師団長&lt;/li&gt;
    &lt;li&gt;兵隊長&lt;/li&gt;
    &lt;li&gt;戦闘兵&lt;/li&gt;
&lt;/ol&gt;</code></pre>


<p><strong><span style="color: #ff0000;">08.</span> 倒轉金字塔 (ul+ol+li)</strong></p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.pyramid-3b {
    position: relative;
    padding: 0px;
    margin: 0px auto;
    width: calc(8em * 5);
    list-style: none;
    font-size: 1.4vw;
}
.pyramid-3b &gt; li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
.pyramid-3b &gt; li + li {
    border-top: 2px solid #fff;
}
.pyramid-3b &gt; li::before {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background-position: top 2px right 1px, top 2px left 1px;
    background-size: 50% calc(6em * 5);
    background-repeat: no-repeat;
    content: "";
}
.pyramid-3b &gt; li:nth-of-type(1)::before {
    z-index: -1;
    height: calc(6em * 1);
    background-image:
        linear-gradient(to bottom right, #3388dd 50%, transparent 50%),
        linear-gradient(to bottom left, #3388dd 50%, transparent 50%);
}
.pyramid-3b &gt; li:nth-of-type(2)::before {
    z-index: -2;
    height: calc(6em * 2);
    background-image:
        linear-gradient(to bottom right, #5199e1 50%, transparent 50%),
        linear-gradient(to bottom left, #5199e1 50%, transparent 50%);
}
.pyramid-3b &gt; li:nth-of-type(3)::before {
    z-index: -3;
    height: calc(6em * 3);
    background-image:
        linear-gradient(to bottom right, #62a3e4 50%, transparent 50%),
        linear-gradient(to bottom left, #62a3e4 50%, transparent 50%);
}
.pyramid-3b &gt; li:nth-of-type(4)::before {
    z-index: -4;
    height: calc(6em * 4);
    background-image:
        linear-gradient(to bottom right, #73ade7 50%, transparent 50%),
        linear-gradient(to bottom left, #73ade7 50%, transparent 50%);
}
.pyramid-3b &gt; li:nth-of-type(5)::before {
    z-index: -5;
    height: calc(6em * 5);
    background-image:
        linear-gradient(to bottom right, #85b8ea 50%, transparent 50%),
        linear-gradient(to bottom left, #85b8ea 50%, transparent 50%);
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;ol class="pyramid-3b"&gt;
    &lt;li&gt;王&lt;/li&gt;
    &lt;li&gt;王直属護衛軍&lt;/li&gt;
    &lt;li&gt;師団長&lt;/li&gt;
    &lt;li&gt;兵隊長&lt;/li&gt;
    &lt;li&gt;戦闘兵&lt;/li&gt;
&lt;/ol&gt;</code></pre>


<p><span style="color: #008000;"><strong>演示：</strong></span><a href="https://www.ifreesite.com/hawkins" target="_blank" rel="noopener">ifreesite.com/hawkins</a></p>
<p><strong>代碼測試︰</strong> <a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<p><span style="color: #008000;"><strong>圖片預覧：</strong></span></p>
<p><img decoding="async" src="https://i.imgur.com/y5yAMR5.jpeg" /></p>
<p><strong>放大圖片：</strong><a href="https://imgur.com/y5yAMR5" target="_blank" rel="noopener">按此&gt;&gt;</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span></p>
<p><strong>01.</strong> <a href="https://stackoverflow.com/questions/79653328/pyramid-with-text-in-html-css" target="_blank" rel="noopener">Pyramid with text in HTML/CSS</a></p>
<p><strong>02.</strong> <a href="https://codepen.io/tylerlwsmith/pen/RwNZKgp" target="_blank" rel="noopener">CSS Pyramid</a></p>
<p><strong>03.</strong> <a href="https://migi.me/css/pyramid-hierarchy-chart" target="_blank" rel="noopener">ピラミッド型の階層図をCSSだけで描きたい</a></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/transform-scalex-scaley-translatex-translatey-8981.html" target="_blank" rel="noopener">CSS將圖片文字任何物件反轉</a></div>]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/css-pyramid-pyramidal-grid-8990.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>CSS將圖片文字任何物件反轉</title>
		<link>https://www.moonlol.com/transform-scalex-scaley-translatex-translatey-8981.html</link>
					<comments>https://www.moonlol.com/transform-scalex-scaley-translatex-translatey-8981.html#respond</comments>
		
		
		<pubDate>Fri, 08 May 2026 05:52:39 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[CSS]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8981</guid>

					<description><![CDATA[有一個 transform 屬性 CSS 標籤，能夠實現將圖片、文字、框架等，向水平方向反轉或垂直方向反轉，t [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>有一個 transform 屬性 CSS 標籤，能夠實現將圖片、文字、框架等，向水平方向反轉或垂直方向反轉，transform 標籤也有一大特點，允許你對元素進行旋轉、縮放、傾斜或翻譯。<span id="more-8981"></span></p>
<p><strong>X水平反轉（左右翻轉）</strong><br />transform: translateX(-1);</p>
<p><strong>Y垂直反轉（上下翻轉）</strong><br />transform: translateY(-1);</p>
<p><strong>X水平反轉（左右翻轉）</strong><br />transform: scaleX(-1);</p>
<p><strong>Y垂直反轉（上下翻轉）</strong><br />transform: scaleY(-1);</p>
<p><span style="color: #808000;"><strong>原圖片：</strong></span>tinyjpg.com/images/social/website.jpg</p>
<p><span style="color: #800000;"><strong>示例一：</strong></span>將圖片沿 X 軸（水平方向）反轉</p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.flip-horizontal {
	transform: scaleX(-1);
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;img src="//tinyjpg.com/images/social/website.jpg" title="Image" class="flip-horizontal" /&gt;
&lt;div class="flip-horizontal"&gt;
01. 我是文字貼!
&lt;/div&gt;</code></pre>


<p><span style="color: #800000;"><strong>示例二：</strong></span>將圖片沿 Y 軸（垂直方向）反轉</p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.flip-vertical {
	transform: scaleY(-1);
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;img src="//tinyjpg.com/images/social/website.jpg" title="Image" class="flip-vertical" /&gt;
&lt;div class="flip-vertical"&gt;
02. 我是文字貼!
&lt;/div&gt;</code></pre>


<p><strong>代碼測試︰</strong> <a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span><a href="https://www.cnblogs.com/ai888/p/18629327" target="_blank" rel="noopener">使用純CSS3將圖片反轉</a></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/css-pyramid-pyramidal-grid-8990.html" target="_blank" rel="noopener">CSS金字塔Pyramid</a></div>]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/transform-scalex-scaley-translatex-translatey-8981.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>HTML5 MathML分數的分子分母及帶分數</title>
		<link>https://www.moonlol.com/html5-mathml-fraction-8953.html</link>
					<comments>https://www.moonlol.com/html5-mathml-fraction-8953.html#respond</comments>
		
		
		<pubDate>Thu, 07 May 2026 15:00:27 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[HTML5]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8953</guid>

					<description><![CDATA[MathML 指「數學標記語言」是 XML 語言的一個子集，用來在 Web 網頁，甚至部分軟體或 APP 應用 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>MathML 指「數學標記語言」是 XML 語言的一個子集，用來在 Web 網頁，甚至部分軟體或 APP 應用程式，顯示數學公式之用，這次使用 Math 標記，寫出分數公式，如分子、分母及帶分數等算式。<span id="more-8953"></span></p>
<p>在 N 年前，我們一般在網站打分數會以符號表示，或使用 sup 及 sub 標籤，模仿分數。</p>
<p>如: ⅟ ½ ↉ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒</p>
<p>或 1⁄2 1⁄3 1⁄4 1⁄5 1⁄6</p>
<p><strong>代碼:</strong></p>


<pre class="wp-block-code"><code>&lt;sup&gt;1&lt;/sup&gt;&amp;frasl;&lt;sub&gt;2&lt;/sub&gt;</code></pre>


<p>用以上的方法打出分數，中間的橫線，不是直線而是斜線。</p>
<p>這樣我們需要借助 "Math" 打出正確的分子和分母。</p>
<p><span style="color: #800080;"><strong>MathML 元素分類：</strong></span></p>
<p>Presentation Markup 呈現標記用於描述數學公式的視覺佈局和排版。</p>
<p><strong>主要元素包括：</strong></p>
<p>&lt;mi&gt;： 表示單個字母、數位或其他孤立的數學字元作為標識碼（Identifier）。</p>
<p>&lt;mn&gt;： 表示數位（Number）。</p>
<p>&lt;mo&gt;： 表示運算子（Operator），如加減乘除、等於號、括弧等。</p>
<p>&lt;mrow&gt;： 用來組合其他MathML元素，形成一個行（Row）。</p>
<p>&lt;mfrac&gt;： 建立分數結構。</p>
<p>&lt;msqrt&gt;： 建立根式（平方根）。</p>
<p>&lt;msup&gt;： 建立上標（Superscript）。</p>
<p>&lt;msub&gt;： 建立下標（Subscript）。</p>
<p>&lt;msubsup&gt;： 同時建立上標和下標。</p>
<p>&lt;munder&gt;： 建立下橫線（Underline）。</p>
<p>&lt;mover&gt;： 建立上橫線（Overline）。</p>
<p>&lt;munderover&gt;： 同時建立下橫線和上橫線。</p>
<p>&lt;mfenced&gt;： 用括弧、方括弧等包圍數學運算式。</p>
<p>&lt;mtext&gt;： 在數學公式中插入普通文字。</p>
<p><span style="color: #800080;"><strong>Content Markup</strong></span></p>
<p>內容標記用於描述數學公式的語義和邏輯結構，便於機器處理和理解。</p>
<p><strong>內容標記主要包括：</strong></p>
<p>&lt;ci&gt;： 表示數學變數或識別碼的語義內容。</p>
<p>&lt;cn&gt;： 表示數字的語義內容。</p>
<p>&lt;apply&gt;： 應用一個函數或運算子到一組參數。</p>
<p>&lt;csymbol&gt;： 引入自定義或外部定義的數學符號。</p>
<p>Mixed Markup 在實際使用中，MathML文檔通常混合使用呈現標記和內容標記，以兼顧視覺呈現和語義解釋。</p>
<p><span style="color: #0000ff;"><strong>&lt;mfrac&gt; 與 &lt;mfrac bevelled="true"&gt; 的分別!</strong></span></p>
<p><strong>bevelled</strong> - 指定分數是垂直顯示還是內嵌顯示。通常值是 true 或 false。</p>
<p><strong>numalign</strong> - 指定分子的對齊方式。值是左、右或中心。</p>
<p><strong>denomalign</strong> - 指定分母的對齊方式。值是左、右或中心。</p>
<p><strong>linethick</strong> - 指定分數條的筆畫寬度。值以 px、pt、em 等為單位進行測量。</p>
<p><strong>詳解：</strong><a href="https://www.tutorialspoint.cn/mathml/mathml_fractions.htm" target="_blank" rel="noopener">MathML-分數</a></p>
<p><strong><span style="color: #800000;">Mfrac 打出不同的分數:</span></strong></p>
<p><span style="color: #ff0000;">備註：</span>分數的字體大小，建議設定在: 25px ~ 30px</p>


<pre class="wp-block-code"><code>math {
	font-size: 30px;
	font-weight: bold;
}</code></pre>


<p><strong><span style="color: #ff0000;">01.</span> 分數</strong></p>
<p>版本一：</p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p>版本二：</p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mfrac&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">02.</span> 帶分數</strong></p>
<p>版本一：</p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mi&gt;1&lt;/mi&gt;
&lt;mfrac&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p>版本二：</p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mfrac&gt;
&lt;mi&gt;3&lt;/mi&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">03.</span> 假分數 除以 分數</strong></p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mfrac&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;÷&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">04.</span> 帶分數 乘以 帶分數</strong></p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mrow&gt;
&lt;mi&gt;2&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;mn&gt;7&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;×&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mrow&gt;
&lt;mi&gt;3&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">05.</span> 帶分數 減 分數</strong></p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mrow&gt;
&lt;mi&gt;3&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;－&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">06.</span> 分數 加 帶分數 等於 整數</strong></p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mfrac&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mrow&gt;
&lt;mi&gt;3&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;＝&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mrow&gt;
&lt;mi&gt;2026&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">07.</span> 不同數字組合</strong></p>


<pre class="wp-block-code"><code>&lt;math&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mrow&gt;
&lt;mi&gt;a&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/mrow&gt;
&lt;mfrac bevelled="true"&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;/math&gt;</code></pre>


<p><strong><span style="color: #ff0000;">08.</span> 分數 Table 表格</strong></p>
<p>CSS:</p>


<pre class="wp-block-code"><code>hr {
   margin: 0;
   border: none;
   height: 2px;
   background: #000000;
}</code></pre>


<p>Html:</p>


<pre class="wp-block-code"><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"&gt;
&lt;tr&gt;
&lt;td bgcolor="#E6E6F2"&gt;&lt;table width="100%" border="0" cellspacing="1" cellpadding="1"&gt; &lt;!-- 1 改 0 無線條 --&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a2" value="2" /&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a5" value="5" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&lt;input type="text" name="a1" placeholder="如:1" /&gt;&lt;/td&gt;
&lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
&lt;td&gt;
&lt;select name="en"&gt;
&lt;option value="＋" selected="selected"&gt;＋&lt;/option&gt;
&lt;option value="－"&gt;－&lt;/option&gt;
&lt;option value="×"&gt;×&lt;/option&gt;
&lt;option value="÷"&gt;÷&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a4" placeholder="e.g., 4" /&gt;&lt;/td&gt;
&lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a3" value="3" /&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a6" value="6" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td colspan="5"&gt;&lt;input type="reset" value="清除" /&gt; &amp;nbsp; &lt;input type="button" name="bt" value="＝" onclick="cal" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" maxlength="5" name="a8" value="8" readonly="readonly" /&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a7" value="7" readonly="readonly" /&gt;&lt;/td&gt;
&lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="a9" value="9" readonly="readonly" /&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr align="center" bgcolor="#FFFFFF"&gt;
&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr bgcolor="#FFFFFF"&gt;
&lt;td align="center"&gt;小數值:&lt;/td&gt;
&lt;td align="left" colspan="4"&gt;&lt;input type="text" name="suuchi" value="0.99999" readonly="readonly" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code></pre>


<p><span style="color: #008000;"><strong>演示：</strong></span><a href="https://www.ifreesite.com/calculatortool/fraction.htm" target="_blank" rel="noopener">ifreesite.com/fraction.htm</a></p>
<p><strong>代碼測試︰</strong> <a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<p><span style="color: #008000;"><strong>圖片預覧：</strong></span></p>
<p><img decoding="async" src="https://i.imgur.com/tnHMDEz.jpeg" /></p>
<p><strong>放大圖片：</strong><a href="https://imgur.com/tnHMDEz" target="_blank" rel="noopener">按此&gt;&gt;</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span></p>
<p><strong>01.</strong> <a href="https://www.zhangxinxu.com/wordpress/2018/10/mathml-%E5%85%BC%E5%AE%B9-%E5%B7%A5%E5%85%B7/" target="_blank" rel="noopener">數學標記語言MathML簡介</a></p>
<p><strong>02.</strong> <a href="https://zhuanlan.zhihu.com/p/1928203836738242267" target="_blank" rel="noopener">HTML5 MathML用法詳解</a></p>
<p><strong>03.</strong> <a href="https://cloud.tencent.com/developer/ask/sof/110495329" target="_blank" rel="noopener">等號分母分數的HTML特殊字符</a></p>
<p><strong>04.</strong> <a href="https://developer.mozilla.org/zh-CN/docs/Web/MathML/Tutorials/For_beginners/Fractions_and_roots" target="_blank" rel="noopener">MathML分數和根號</a></p>
<p><strong>05.</strong> <a href="https://cloud.tencent.com/developer/article/2255435" target="_blank" rel="noopener">有用但用處不多的html的屬性</a></p>
<p><strong>06.</strong> <a href="https://www.geeksforgeeks.org/html/html5-mathml-mfrac-tag" target="_blank" rel="noopener">HTML5 MathML&lt;mfrac&gt;tag </a></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/calculator-walking-time-hiking-fraction-9007.html" target="_blank" rel="noopener">走路及跑步和行山(登山)公里分數計算器</a></div>]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/html5-mathml-fraction-8953.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>Html的iFrame尺寸自動縮放</title>
		<link>https://www.moonlol.com/html-iframe-rwd-8939.html</link>
					<comments>https://www.moonlol.com/html-iframe-rwd-8939.html#respond</comments>
		
		
		<pubDate>Tue, 05 May 2026 07:57:18 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[CSS]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8939</guid>

					<description><![CDATA[網頁插入影片、HTML 5 Canvas 內嵌到網站，使用 iframe 標籤，如果設定寬度和高度為 100% [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>網頁插入影片、HTML 5 Canvas 內嵌到網站，使用 iframe 標籤，如果設定寬度和高度為 100% 或 Auto 是無法做到隨網頁大小自動縮放效果的，這時必須透過一個 Div 容器來自動調整寬度和高度了。<span id="more-8939"></span></p>
<p>當我們需要分享 Youtube、抖音Tik Tok、土豆的影片，就可以在 RWD 網頁中顯示的大小，隨著視窗大小，自動放大、縮小 iFrame 的內容，大家可以使用下面方法，此法對於 iframe 的相關物件皆有效果。</p>
<p>此法原理是使用 .youtube 裡的 padding-bottom 屬性將 iframe 撐開，這裡使用 56.25% 是因為 iframe 起始值的 width 為 560 而 height 為 315，所以 height 永遠為 width 的 56.25 ，因此得到 56.25%。</p>
<p><strong>CSS:</strong></p>


<pre class="wp-block-code"><code>.iframe-auto {
	overflow: hidden;
	position: relative;
	padding-bottom: 100%; /* This is the aspect ratio */
}
.iframe-auto iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;div class="iframe-auto"&gt;&lt;iframe src="" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true"&gt;&lt;/iframe&gt;&lt;/div&gt;</code></pre>


<p><span style="color: #008000;"><strong>備註：</strong></span>請自行調整 padding-bottom 比例</p>
<p><strong>如:</strong> 影片建議高度為 padding-bottom: 56.25%</p>
<p><strong>如:</strong> 調用 Canvas 標籤 或 物件 不用修改代碼</p>
<p><strong>如:</strong> 想修改「寬度和高度」只要在 &lt;div class="iframe-auto"&gt; 標籤，改為 &lt;div class="iframe-auto" style="padding-bottom:95%;"&gt; 其中 95% 請自行調整。</p>
<p><strong>代碼測試︰</strong> <a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span></p>
<p><strong>01.</strong> <a href="https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed" target="_blank" rel="noopener">YouTube iFrame Embed </a></p>
<p><strong>02.</strong> <a href="https://nknuahuang.wordpress.com/2020/04/23/how-to-make-a-responsive-100-width-youtube-iframe-embed/" target="_blank" rel="noopener">iframe的YouTube影片的寬高自動調整</a></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/css-div-fit-content-8788.html" target="_blank" rel="noopener">CSS的div自動調整寬度和高度</a></div>]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/html-iframe-rwd-8939.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>Html js下載和儲存按鈕+還原和復原按鈕</title>
		<link>https://www.moonlol.com/html-js-download-save-undo-8906.html</link>
					<comments>https://www.moonlol.com/html-js-download-save-undo-8906.html#respond</comments>
		
		
		<pubDate>Sun, 03 May 2026 13:33:09 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8906</guid>

					<description><![CDATA[Html 經常會用到的幾個儲存按鈕、下載按鈕、還原按鈕、復原按鈕、恢復按鈕，不論是 input 還是 text [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Html 經常會用到的幾個儲存按鈕、下載按鈕、還原按鈕、復原按鈕、恢復按鈕，不論是 input 還是 textarea 輸入框，有了這幾個按鈕，程序就變得超方便，使用者用起來更加得心應手。<span id="more-8906"></span></p>
<p>程序猿如果要加上這些按鈕，往往都要東拼西湊，這次本人一次過分享出來，給大家參考一下。</p>
<p>這些按鈕有些是 HTML 自帶的，有些是用 JS 編寫的，不過!無論是那一種方式，都是能用的。</p>
<p>好! Action...</p>
<p><span style="color: #800000;"><strong>下載按鈕(儲存按鈕):</strong></span></p>
<p>這個連結前面不能加上"<strong>https://</strong>" 或 "<strong>http://</strong>" 或 "<strong>https://www.moonlol.com/</strong>" 或 "<strong>http://www.moonlol.com/</strong>"</p>
<p>只可以填上文件相對路徑，如"<strong>mlogo.png</strong>" 或 "<strong>/mlogo.jpg</strong>" 或 "<strong>image/mlogo.mp3</strong>" 或 "<strong>/file/mlogo.mp4</strong>"</p>
<p><span style="color: #ff0000;"><strong>01.</strong></span> 在連結(鏈接)加上 download 下載檔案文件</p>
<p><strong>程式碼:</strong></p>


<pre class="wp-block-code"><code>&lt;a href="image/mlogo.jpg" download&gt;下載圖片或檔案 01&lt;/a&gt;</code></pre>


<p><span style="color: #ff0000;"><strong>02.</strong></span> 下載連結(連接)改為 download="Mpng" 自定義檔案名稱</p>
<p><strong>程式碼:</strong></p>


<pre class="wp-block-code"><code>&lt;a href="image/mlogo.png" download="Mpng"&gt;下載圖片或檔案 02&lt;/a&gt;</code></pre>


<p><span style="color: #ff0000;"><strong>03.</strong></span> 將 A 下載連結標籤，模仿 Input 或 Button 樣式</p>
<p><strong>程式碼:</strong></p>


<pre class="wp-block-code"><code>&lt;style type="text/css"&gt;
#download-btn {
  background: #04AA6D;
  margin-top: 5px;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}
#download-btn:hover {
  background: #059862;
}
&lt;/style&gt;
&lt;a href="image/mlogo.png" id="download-btn" download&gt;下載圖片或檔案 03&lt;/a&gt;</code></pre>


<p><span style="color: #ff0000;"><strong>04.</strong></span> HTML5 的 Canvas 引用圖片、檔案，並下載 Canvas 程式產生出來的圖片、文件。</p>
<p><strong>一、程式碼：</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
    function download() {
      const canvas = document.querySelector('canvas');
      const url = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.href = url;
      a.download = 'drawing.png';
      document.body.appendChild(a);
      a.click();
      a.remove();
    };
&lt;/script&gt;
&lt;button onClick="download()"&gt;下載&lt;/button&gt;</code></pre>


<p><strong>二、程式碼：</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
    function download() {
      const canvas = document.querySelector('canvas');
      const url = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.href = url;
      a.download = 'qr-code.png';
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
    generate();
&lt;/script&gt;
&lt;button onClick="download()"&gt;下載&lt;/button&gt;</code></pre>


<p><strong>三、程式碼：</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
   function generate() {
    var canvas = document.getElementById("qrcode").querySelector("canvas");
    var dataURL = canvas.toDataURL("image/png");
    var downloadBtn = document.getElementById("downloadBtn");
    downloadBtn.href = dataURL;
  }
&lt;/script&gt;
&lt;a href="#" id="downloadBtn" download="qrcode.png"&gt;下載QRCode&lt;/a&gt;</code></pre>


<p><strong>URL連結使用絕對路徑(絕對位址)下載問題:</strong></p>
<p>使用 <strong>download</strong> 屬性需要注意，<span style="color: #ff0000;">只有同域（來源相同）時才會得到完整支援</span>。 這一點 w3school 並沒有明確指出。 Mozilla 的開發文檔裡有一行小字：<span style="color: #008000;">This attribute is only honored for links to resources with the same-origin. </span>在 Chrome 下，當 href 不同域，會以原始的名稱下載檔。在 Firefox 下，當 href 不同域時，會當做普通 A 鏈接標籤處理，直接在瀏覽器中打開該連接。</p>
<p>而且 <strong>download</strong> 是一個非標準 MIME 類型：某些情況下，即使資源是圖片，但如果伺服器返回的 MIME 類型不是標準的圖片類型，如: image/jpeg、image/png 等，瀏覽器也可能不會觸發下載行為。</p>
<p><strong>解決方法：</strong></p>
<p>一、針對其它源的圖片或文件位址做代理，將對它們的訪問代理到本地處理。</p>
<p>二、將其它源的圖片或文件轉成 Base64 編碼後，再放入 href 位置內。</p>
<p><strong>圖片轉換Base64工具：</strong><a href="https://www.ifreesite.com/upload" target="_blank" rel="noopener">上傳圖片網站</a></p>
<p><span style="color: #008000;"><strong>演示：</strong></span></p>
<p><strong>01.</strong> <a href="https://www.ifreesite.com/favicon" target="_blank" rel="noopener">ifreesite.com/favicon</a></p>
<p><strong>02.</strong> <a href="https://www.ifreesite.com/qrcode" target="_blank" rel="noopener">ifreesite.com/qrcode</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span></p>
<p><strong>01.</strong> <a href="https://www.w3schools.com/howto/howto_html_download_link.asp" target="_blank" rel="noopener">How To Create a Download Link</a></p>
<p><strong>02.</strong> <a href="https://www.w3schools.com/tags/att_a_download.asp" target="_blank" rel="noopener">HTML a download Attribute</a></p>
<p><strong>03.</strong> <a href="https://medium.com/@pan913063/%E8%A7%A3%E6%B1%BAhtml-a-href-download-%E7%84%A1%E6%B3%95%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BC%89%E6%AA%94%E6%A1%88%E8%87%B3%E6%9C%AC%E6%A9%9F%E5%95%8F%E9%A1%8C-c4a433528b4c" target="_blank" rel="noopener">解決 a download無法直接下載檔案問題</a></p>
<p><strong>04.</strong> <a href="https://medium.com/@roan6903/html-canvas-%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E5%9C%96%E7%89%87-%E5%A6%82%E4%BD%95%E4%B8%8B%E8%BC%89%E5%9C%96%E7%89%87-d9cdb48365d2" target="_blank" rel="noopener">Canvas 如何引用圖片？如何下載圖片？</a></p>
<p><strong>05.</strong> <a href="https://deepseek.csdn.net/68246038e985815179835445.html" target="_blank" rel="noopener">HTML JS實現點擊按鈕下載文件功能</a></p>
<p><span style="color: #993300;"><strong>還原按鈕(Undo 復原按鈕 / 恢復按鈕):</strong></span></p>
<p><strong>程式碼：</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
var save = ''
function undo() {
   undobtn = document.biggbks.text.value
   document.biggbks.text.value = save
   save = undobtn
}
&lt;/script&gt;
&lt;form name="biggbks"&gt;
&lt;textarea name="text" id="text" rows="" cols="" style="width:350px;height:150px;"&gt;&lt;/textarea&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;input type="button" value="復原" onClick="undo()" /&gt;
&lt;/form&gt;</code></pre>


<p><span style="color: #008000;"><strong>演示：</strong></span><a href="https://www.ifreesite.com/gbk-big5-gb2312-utf8.htm" target="_blank" rel="noopener">ifreesite.com/gbk-big5.htm</a></p>
<p><span style="color: #ff6600;"><strong>技術文檔：</strong></span></p>
<p><strong>01.</strong> <a href="https://www.cssscript.com/undo-redo-history" target="_blank" rel="noopener">Undo/Redo In Text Field - UndoRedo.js</a></p>
<p><strong>02.</strong> <a href="https://github.com/jzaefferer/undo/tree/master" target="_blank" rel="noopener">GitHub jzaefferer/undo: Undo.js</a></p>
<p><strong>測試代碼(網頁)：</strong><a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<p><strong>圖片預覧：</strong></p>
<p><img decoding="async" src="https://i.imgur.com/MnJmebg.jpeg" /></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/html-js-reset-8889.html" target="_blank" rel="noopener">Html js清除按鈕包括清空value屬性值</a><br />02. <a href="https://www.moonlol.com/clipboard-copy-element-7750.html" target="_blank" rel="noopener">JS複製按鈕clipboard copy element</a></div>]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/html-js-download-save-undo-8906.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>Html js清除按鈕包括清空value屬性值</title>
		<link>https://www.moonlol.com/html-js-reset-8889.html</link>
					<comments>https://www.moonlol.com/html-js-reset-8889.html#respond</comments>
		
		
		<pubDate>Sat, 02 May 2026 11:42:34 +0000</pubDate>
				<category><![CDATA[源碼分享]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8889</guid>

					<description><![CDATA[Html 提供的 Type reset 按鈕，是給 input 和 textarea 輸入框架，用作清除內容， [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Html 提供的 Type reset 按鈕，是給 input 和 textarea 輸入框架，用作清除內容，方便使用者一鍵清空內容，但是，HTML 預設的"reset"清除按鈕，無法清空"value"預設值，以下JS代碼可以做得到。<span id="more-8889"></span></p>
<p>代碼分層不同場境，用作不同的效果。</p>
<p>包括：全部清除、自由放置、單獨清空不同屬性的框架。</p>
<p>開始!...</p>
<p><strong>Html 預設的重置按鈕：</strong></p>
<p><span style="color: #008000;">&lt;input type="reset" value="清除" /&gt;</span> OR <span style="color: #008000;">&lt;button type="reset"&gt;重置&lt;/button&gt;</span></p>
<p><strong>範例：</strong></p>


<pre class="wp-block-code"><code>&lt;form id="form" name="form"&gt;
&lt;input type="file" name="" /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;textarea name="text" rows="" cols="" style="width:160px;height:50px;display:block;"&gt;&lt;/textarea&gt;
&lt;br /&gt;
&lt;input type="text" name="" /&gt;
&lt;input type="text" name="" /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;input type="reset" value="清除" /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;button type="reset"&gt;Reset&lt;/button&gt;
&lt;/form&gt;</code></pre>


<p>默認的 HTML 重置按鈕，是無法清除"value"的預設值。</p>
<p>如果你想清除 input 或 textarea 的默認內容，同時也想清空"value"及預設內容，請使用下列代碼。</p>
<p><span style="color: #ff0000;"><strong>01.</strong></span> 全部清除 id="if-1s1a or if-1s1b"</p>
<p><strong>JS:</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
function ClearText1s1a() {
    var inputs = document.querySelectorAll("#if-1s1a input, #if-1s1a textarea");
    inputs.forEach(function(input) {
        if (input.type === "text" || input.type === "file") {
            input.value = "";
        } else if (input.tagName.toLowerCase() === "textarea") {
            input.value = "";
        }
    });
}
&lt;/script&gt;</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;form id="if-1s1a" name="love">
&lt;input type="text" name="bb1" value="a1" />
&lt;input type="text" name="bb2" value="a2" />
&lt;input type="text" name="bb3" value="a3" />
&lt;input type="text" name="bb4" value="" />
&lt;input type="text" name="bb5" value="" />
&lt;br />&lt;br />
&lt;input type="file" name="the_upload" />
&lt;br />&lt;br />
&lt;textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;">&lt;/textarea>
&lt;br />&lt;br />
&lt;textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;">請輸入文字&lt;/textarea>
&lt;br />&lt;br />
&lt;input type="button" onClick="ClearText1s1a()" value="清除01" /> &lt;!-- 用 if-1s1b 改 ClearText1s1b -->
&lt;/form></code></pre>


<p><span style="color: #ff0000;"><strong>02.</strong></span> 自由放或 Form ID 被佔用時 Span Div id="if-1s1a or if-1s1b"</p>
<p><strong>JS:</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
function ClearText1s1b() {
    var inputs = document.querySelectorAll("#if-1s1b input, #if-1s1b textarea");
    inputs.forEach(function(input) {
        if (input.type === "text" || input.type === "file") {
            input.value = "";
        } else if (input.tagName.toLowerCase() === "textarea") {
            input.value = "";
        }
    });
}
&lt;/script&gt;</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;form id="" name="love"&gt;
&lt;input type="text" name="bb1" value="a1" /&gt;
&lt;input type="text" name="bb5" value="" /&gt;
&lt;span id="if-1s1b"&gt;
&lt;input type="text" name="bb2" value="a2" /&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;"&gt;&lt;/textarea&gt;
&lt;/span&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;input type="button" onClick="ClearText1s1b()" value="清除02" /&gt; &lt;!-- 用 if-1s1a 改 ClearText1s1a --&gt;
&lt;/form&gt;</code></pre>


<p><span style="color: #ff0000;"><strong>03.</strong></span> 單獨清空 id="if-1s2"</p>
<p><strong>JS:</strong></p>


<pre class="wp-block-code"><code>&lt;script type="text/javascript"&gt;
function ClearText1s2() {
    var inputs = document.querySelectorAll("#if-1s2");
    inputs.forEach(function(input) {
        if (input.type === "text" || input.type === "file") {
            input.value = "";
        } else if (input.tagName.toLowerCase() === "textarea") {
            input.value = "";
        }
    });
}
&lt;/script&gt;</code></pre>


<p><strong>Html:</strong></p>


<pre class="wp-block-code"><code>&lt;form name="love">
&lt;input type="text" id="if-1s2" name="bb1" value="a1" />
&lt;input type="text" name="bb2" value="a2" />
&lt;input type="text" name="bb3" value="a3" />
&lt;input type="text" name="bb4" value="" />
&lt;input type="text" id="if-1s2" name="bb5" value="" />
&lt;br />&lt;br />
&lt;input type="file" id="if-1s2" name="the_upload" />
&lt;br />&lt;br />
&lt;textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;">&lt;/textarea>
&lt;br />&lt;br />
&lt;textarea name="text" id="if-1s2" rows="" cols="" style="width:160px;height:50px;">請輸入文字&lt;/textarea>
&lt;br />&lt;br />
&lt;input type="button" onClick="ClearText1s2()" value="清除03" />
&lt;/form></code></pre>


<p><strong>代碼測試：</strong><a href="https://www.ifreesite.com/runcode.htm" target="_blank" rel="noopener">ifreesite.com/runcode.htm</a></p>
<div class="mo-post-and">相關文章：<br />01. <a href="https://www.moonlol.com/clipboard-copy-element-7750.html" target="_blank" rel="noopener">JS複製按鈕clipboard copy element</a><br />02. <a href="https://www.moonlol.com/html-js-download-save-undo-8906.html" target="_blank" rel="noopener">Html js下載和儲存按鈕+還原和復原按鈕</a></div>


<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/html-js-reset-8889.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>Google向Bitcoin用戶發出警告</title>
		<link>https://www.moonlol.com/google-bitcoin%e9%87%8f%e5%ad%90%e9%9b%bb%e8%85%a6-8881.html</link>
					<comments>https://www.moonlol.com/google-bitcoin%e9%87%8f%e5%ad%90%e9%9b%bb%e8%85%a6-8881.html#respond</comments>
		
		
		<pubDate>Thu, 16 Apr 2026 04:59:03 +0000</pubDate>
				<category><![CDATA[資訊科技]]></category>
		<category><![CDATA[最新消息]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8881</guid>

					<description><![CDATA[Google 向 Bitcoin 用戶發出警告，能夠摧毀區塊鏈的量子電腦即將來臨；Google 量子人工智慧( [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Google 向 Bitcoin 用戶發出警告，能夠摧毀區塊鏈的量子電腦即將來臨；Google 量子人工智慧( Quantum AI ) 團隊，在 2026 年 4 月份，發佈一份白皮書，展示一台足夠強大的量子電腦(量子計算機)，理論上能破解 Bitcoin 比特幣底層加密所需資源的二十分之一，破解時間可縮短至約 9 分鐘，這一發現大幅降低了「量子末日」的威脅門檻。<span id="more-8881"></span></p>
<p>目前，約 690 萬枚比特幣（約總供應量的四分之一）已永久鎖死在區塊鏈上，面臨直接風險，值得注意的是，Google 已將「量子末日」應對準備的截斷期限大幅提前至 2029 年。</p>
<p>「量子末日」指量子計算機能破解私鑰密碼算法的時刻。<span style="text-decoration: underline;"><strong>屆時，銀行卡、社交媒體帳號等所有日常密碼都將面臨風險，我們依賴的加密基礎也將被動搖。</strong></span> Google 報告提供了一個具體攻擊場景：當一筆比特幣交易被廣播至網絡、在「雙重花費」中等待確認時，攻擊者可利用量子計算機發起攻擊。比特幣的平均交易確認時間約為 10 分鐘。而 Google 研究發現，在特定條件下，量子電腦(量子計算機)從私鑰推導出公鑰的攻擊過程僅需約 9 分鐘。</p>
<p>在這場與交易確認時間的競賽中，攻擊者有約 41% 的機率搶在交易被正式記錄前竊取私鑰，並「截胡」這筆資金。</p>
<p><strong>量子計算對加密算法的衝擊</strong></p>
<p>大多數加密貨幣（包括比特幣和以太坊）採用橢圓曲線加密作為基礎算法。在傳統計算下，窮舉所有可能密鑰所需的時間遠超宇宙的壽命。但量子電腦(量子計算機)並非逐一嘗試，而是同時探索所有可能，並透過干涉篩選出正確答案。Google 報告還揭露另一個更直接且緊迫的威脅：目前約 690 萬枚比特幣存放在私鑰已永久丟失的錢包中，其中包括比特幣創始人中本聰的 110 萬枚。對於這部分資產，一旦足夠強大的量子電腦(量子計算機)問世，攻擊者無需進行 9 分鐘的「競速」即可隨時破解並竊取資金。</p>
<p>在 Google 報告發佈前一周（2026 年 3 月 12 日），另一份投資發佈的報告指出，當今量子電腦(量子計算機)在算力上遠未達到構成威脅的門檻，而且任何有意義的突破都能首先影響更廣泛的互聯網安全領域，而非僅限比特幣。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/google-bitcoin%e9%87%8f%e5%ad%90%e9%9b%bb%e8%85%a6-8881.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
		<item>
		<title>開設OPC一人公司時代必用的5款AI工具</title>
		<link>https://www.moonlol.com/opc-one-person-company-8801.html</link>
					<comments>https://www.moonlol.com/opc-one-person-company-8801.html#respond</comments>
		
		
		<pubDate>Mon, 06 Apr 2026 16:49:40 +0000</pubDate>
				<category><![CDATA[資訊科技]]></category>
		<category><![CDATA[AI]]></category>
		<guid isPermaLink="false">https://www.moonlol.com/?p=8801</guid>

					<description><![CDATA[大學生畢業變失業，學位泛濫如花草般，市場供過於求，前景感到十分堪憂，很多人找不到專科工作，造成社會出現很多年青 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>大學生畢業變失業，學位泛濫如花草般，市場供過於求，前景感到十分堪憂，很多人找不到專科工作，造成社會出現很多年青人，選擇躺平、佛系隱藏自己，疏遠人群，斷絕人際關係，跑到深山避世，從此不聞江湖草木聲，久而久之變相成為了國家的重大問題，如果你失業，找不到工作，不如創立自己的一人公司 One Person Company (OPC)<span id="more-8801"></span></p>
<p><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f9e0.png" alt="🧠" class="wp-smiley" style="height: 1em; max-height: 1em;" /> AI 時代，打造你的一人公司，以前創業要找團隊、找資金、租辦公室，現在只要一台電腦＋網絡＋幾個 AI 工具，你就能夠一個人撐起整套事業，<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f60e.png" alt="😎" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 所謂「一人公司」英文「One Person Company」簡稱「OPC」並不是孤單工作，而是讓科技幫你省下瑣事，免除辦公文化，把時間留給創意。</p>
<p><img decoding="async" src="https://i.imgur.com/51BuLBP.png" /></p>
<p>浙江杭州近期掀起「一人公司」（OPC）創業風潮，在AI技術加持下，有創業者僅憑一台電腦與個人專長，就能完成公司營運，甚至年營收達150萬元（人民幣，下同，約台幣694萬元），引起熱議。這類新型態模式顛覆傳統創業邏輯，在上城區率先推出專項政策後，余杭、蕭山、濱江等地也陸續跟進，透過免租金、補助與算力支持降低門檻，加速AI創業落地。</p>
<p><strong>政策推動「一人公司」快速崛起</strong></p>
<p>據《錢江視頻》報導，浙江省首個區級OPC（One Person Company ，一人公司）專項政策於2026年3月3日在杭州市上城區發佈，當地喊出打造「OPC創業第一城」隨後余杭區推出「OPC全要素護航包」，蕭山區提出十條「養龍蝦」措施，濱江區則推出政策協助AI創業者實現「算力自由」形成多區聯動支持態勢。</p>
<p><strong>AI成為「虛擬團隊」一人撐起公司運作</strong></p>
<p>在中國數谷未來數智港園區內，已設立OPC「一人獨角獸社區」創業者只需一台電腦、一個工位與一個創意，即可成立公司。園區工位月租約700至800元（人民幣，下同），在政策扶持下，前6個月租金、水電與網路費用全免。</p>
<p>實際運作上，多數工作由AI完成。以創業者武培文為例，其公司主要為海外中小電商提供行銷服務，透過多個 AI 智能體分工，包括數據抓取、市場分析、文案生成與廣告投放等，他本人僅負責決策與驗收，AI 可替代約 90% 執行工作。</p>
<p><strong>成功案例，年營收可達 150 萬元人民幣</strong></p>
<p>在政策支持與AI技術加持下，已有創業者取得實際成果。武培文的「一人公司」年營收可達150萬元，月均成本僅約3000元，主要用於AI工具與伺服器費用，幾乎無人力成本，淨利率超過65%。</p>
<p>此外，上城區打造的「鴻鵠匯」創業社區，提供超過1100平方公尺空間，入選者不僅免租金，還可獲得等值5萬美元的啟動補助，且不要求股權、不限制領域，讓創業者可自由試錯。政府每季再投入約100萬元專項資金，形成完整扶持體系。</p>
<p><strong>模式優勢，降低門檻並加速創新落地</strong></p>
<p>分析指出，「一人公司」模式帶來多項改變。首先，大幅降低創業門檻，過去需要團隊與資金，如今個人即可進場；其次，加速AI技術落地，透過小規模應用快速驗證市場需求；同時，也讓設計師、開發者與內容創作者等個體，有機會建立自己的產品與品牌。</p>
<p>杭州透過免租、補助與算力支持，打造從「零起步」到「成果轉化」的完整鏈條，被視為對新型創業模式的制度回應。</p>
<p><strong>爭議與風險，並非「零門檻致富」</strong></p>
<p>不過，此模式也引發質疑。專家指出，「一人公司」並非人人可複製，仍需具備產業經驗與技術能力，例如AI流程設計、數據合規與模型調校等。</p>
<p>此外，市場上也出現打著「AI一人創業」名義的高價課程，部分甚至涉及誘導貸款等亂象。實務上，創業者普遍反映「身體較自由，但心力更累」，工作時間延長至深夜，需獨自承擔決策壓力與孤獨感。</p>
<p>新型產業趨勢，「超級個體」逐漸成形</p>
<p>儘管如此，「一人公司」仍被視為AI時代的重要補充形態，而非取代傳統企業。從AI導演、內容創作者到行銷顧問，越來越多「超級個體」案例出現。</p>
<p>業界認為，AI的核心價值在於放大個人能力，但無法取代策略判斷與產業經驗。杭州此類政策實驗，也被視為探索未來產業結構與就業模式的重要方向。</p>
<p><img decoding="async" src="https://i.imgur.com/k9ToOGt.jpeg" /></p>
<p><span style="color: #800000;"><strong>一人公司創業者必用的 5 款 AI 工具</strong></span></p>
<p><strong>01.</strong> ChatGPT</p>
<p>網站：<a href="https://openai.com" target="_blank" rel="noopener">openai.com</a></p>
<p>簡介：ChatGPT ( Generative Pre-trained Transfomer ) 是由 OpenAI 開發的 AI 聊天機械人，是 (Large Language Model,）LLM 大型語言模型。ChatGPT 是人工智慧發展 ( 或人類發展 ) 中的一個重要歷程碑，透過強大的語言生成能力使得人機對話成為現實，ChatGPT 的應用層面廣泛，從傳統客服到教育，甚至延伸到創作和內容生成領域，都能夠受益於其強大的對話能力。</p>
<p><strong>02.</strong> NotebookLM</p>
<p>網站：<a href="https://notebooklm.google" target="_blank" rel="noopener">notebooklm.google</a></p>
<p>簡介：NotebookLM（Notebook Language Model）是由 Google 開發的AI筆記助理，專為研究與寫作設計。它能讀取使用者上傳的文件，根據內容生成摘要、回答問題，甚至提供相關資訊，幫助整理思路與加速寫作流程。同時，NotebookLM 聲明，絕不會將個人資料用於模型訓練。</p>
<p><strong>03.</strong> Perplexity</p>
<p>網站：<a href="https://www.perplexity.ai" target="_blank" rel="noopener">Perplexity.ai</a></p>
<p>簡介：Perplexity 是一個由「AI聊天機器人」驅動的對話搜尋引擎，通過自然語言預測文本(NLG)進行運作。它能理解使用者問題後，自動檢索、整理多個權威網站資訊，並生成附帶來源引用的精簡回答，彌補傳統搜尋引擎資訊過於零散的缺點。</p>
<p><strong>04.</strong> Gemini</p>
<p>網站：<a href="https://gemini.google.com" target="_blank" rel="noopener">gemini.google.com</a></p>
<p>簡介：Google Gemini 是由 Google DeepMind 所開發的多模態大型語言模型（Large Language Model，LLM），具備同時理解和處理文字、圖片、音訊、影片及程式碼等多種形式資訊的能力。Gemini 的設計理念在於打造一個能夠像人類一樣進行多元思考的 AI 系統，而非僅侷限於單一類型的輸入輸出。</p>
<p><strong>05.</strong> Claude</p>
<p>網站：<a href="https://claude.com" target="_blank" rel="noopener">claude.com</a></p>
<p>簡介：Claude 是獲得 Amazon (亞馬遜) 與 Google 等科技巨頭支持的 Anthropic 所開發的 AI 對話服務，這個名稱不僅代表該服務本身，也指背後驅動它的 AI 模型。使用者可以造訪其網站，就像使用 ChatGPT 一樣與 Claude 互動；開發者也能調用 Claude API，開發企業內部應用。</p>
<p><img decoding="async" src="https://i.imgur.com/h8rIq56.jpeg" /></p>
<p><span style="color: #800000;"><strong>AI 時代!如何打造一人公司</strong></span></p>
<p><strong>✦ 1. 找出「你＋AI」的黃金組合，別急著想開什麼公司，先問自己：</strong></p>
<p>一、我會什麼？AI 能幫我做什麼？</p>
<p>二、你擅長寫作，就用 AI 幫你發想＋潤稿；</p>
<p>三、你做設計，就用 AI 生成草圖；</p>
<p>四、你管社群，就讓 AI 幫你排程、回覆。</p>
<p>五、AI 是你的加速器，不是替代品。</p>
<p><strong>✦ 2. 先做一個人用得開心的 MVP</strong></p>
<p>不要一開始就想「我要做大」先做出一個「你自己覺得超方便、能解決問題」的小版本，像是用 Notion＋ChatGPT＋Canva 做一份模板，或開個線上服務頁面試水溫，先服務一個人、再優化、再自動化，這才是一人公司最穩的起步法。</p>
<p><strong>✦ 3. 讓 AI 成為你的「第二團隊」</strong></p>
<p>你不需要請十個人，用幾個 AI 工具，就能省掉 80% 的重工，內容生成用 ChatGPT、影片腳本交給 CapCut、任務管理用 Notion AI、流程規劃交給 GitMind 做腦圖，讓工具跑流程，你專心想策略，AI 做事，你做決策。</p>
<p><strong>✦ 4. 專注在利基市場，別想取悅所有人</strong></p>
<p>一人公司最怕「什麼都想做」找一個明確的小領域、解一個真問題，例如「幫自由工作者優化履歷」<br />「幫台灣品牌做英文文案」「幫創作者整理內容」小市場、快迭代，比「大而全」更有勝算。</p>
<p><strong>✦ 5. 把自由當 KPI</strong></p>
<p>不是一定要賺最多，而是活得最自由，你可以自己決定工作時間、客戶數量、合作對象，想放假就放假，想開案就開案，AI 幫你自動運作的，是「穩定自由」這件事。</p>
<p><strong>✦ 6. 記得經營個人品牌</strong></p>
<p>一人公司沒有團隊品牌，你本人就是品牌，經營 Threads、IG、Newsletter 都可以，讓別人知道你在做什麼、為什麼做，AI 可以幫你擬貼文、生成腳本、整理素材，但最打動人心的，還是你自己的聲音。</p>


<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.moonlol.com/opc-one-person-company-8801.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<dc:creator>hemu3q@gmail.com (Jack!)</dc:creator></item>
	</channel>
</rss><!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Object Caching 12/70 objects using Disk
Page Caching using Disk (Page is feed) 
Lazy Loading (feed)
Minified using Disk
Database Caching using Disk

Served from: www.moonlol.com @ 2026-05-15 16:14:43 by W3 Total Cache
-->