timmy / 自動化前端專案初始化腳本 (PowerShell)
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 10 months ago
這段 PowerShell 腳本建立一個專案目錄，初始化基本的前端專案結構，包括 index.html、src 資料夾及子目錄，並透過 npm 安裝必要的依賴 (lit、vite、serve)，最後列出目錄結構供檢查。
| 1 | # 檢查是否提供了目錄名稱參數 |
| 2 | if ($args.Length -eq 0) { |
| 3 | Write-Host "Usage: .\setup_project.ps1 <directory_name>" |
| 4 | exit 1 |
| 5 | } |
| 6 | |
| 7 | # 將參數設定為 PROJECT_DIR 變數 |
| 8 | $PROJECT_DIR = $args[0] |
| 9 | |
| 10 | # 嘗試建立目錄 |
timmy / Leaflet 多地點標記與自訂圖示
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 10 months ago
此範例使用 Leaflet 在 OpenStreetMap 上顯示多個地點標記，並使用自訂圖示來強調特定位置，如台北 101、中正紀念堂和士林夜市。點擊標記可顯示彈出資訊，並支援地圖點擊事件以顯示座標。
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Leaflet 多個地點範例</title> |
| 5 | <meta charset="utf-8" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| 8 | <style> |
| 9 | #map { |
| 10 | height: 600px; |
timmy / Leaflet 互動地圖應用
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 10 months ago
此程式使用 Leaflet 建立一個互動地圖，並整合標記群集、地理搜尋、繪圖工具、量測工具及路徑規劃功能。使用者可以在地圖上添加標記、繪製形狀、量測距離，並規劃路線，適用於 GIS 應用和導航服務。
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Leaflet 地圖範例</title> |
| 5 | <meta charset="utf-8" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> |
| 8 | <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> |
| 9 | <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" /> |
| 10 | <style> |
timmy / Leaflet 標記與互動地圖
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 10 months ago
此範例使用 Leaflet 在 OpenStreetMap 上顯示多個標記，並附加彈出視窗說明不同地點的資訊。地圖支援點擊事件，可顯示使用者點擊的座標，適用於地理資訊應用和旅遊地圖開發。
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Leaflet 地圖範例</title> |
| 5 | <meta charset="utf-8" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| 8 | <style> |
| 9 | #map { |
| 10 | height: 600px; |
timmy / 使用 PyWebIO 進行即時時間顯示
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 10 months ago
此範例展示如何使用 PyWebIO 及 JavaScript 顯示即時更新的時間。透過 put_html() 方法嵌入 HTML 和 JavaScript，並使用 setInterval() 讓時間每秒更新一次，使 PyWebIO 應用能夠提供更動態的用戶體驗。
| 1 | from pywebio import start_server |
| 2 | from pywebio.output import put_html |
| 3 | import datetime |
| 4 | |
| 5 | def use_scope_case3(): |
| 6 | put_html(''' |
| 7 | <div id="time"></div> |
| 8 | <script> |
| 9 | function updateTime() { |
| 10 | document.getElementById("time").innerText = new Date().toLocaleString(); |
Újabb
Régebbi