英尺&碼 米 轉換器
讓我們使用 Rust 和 WebAssembly 建立一個簡單的英尺和碼到米轉換器 Web 應用程式!本指南提供了一種簡化的方法。
首先,請確保您的系統上安裝了 Rust。 從//m.sbmmt.com/link/29f81692d9af87c8826aafca8ff5dad3下載並安裝。
接下來,使用 Cargo 建立一個新的 Rust 專案:
cargo new yardandfeetconverter
修改 Cargo.toml
檔案以包含 wasm-bindgen
依賴項並指定 crate 類型:
[dependencies] wasm-bindgen = "0.2" [lib] crate-type = ["cdylib"]
導覽至 src
目錄並將 main.rs
重新命名為 lib.rs
。 將 lib.rs
的內容替換為以下轉換邏輯:
use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn yards_to_meters(yards: f64) -> f64 { yards * 0.9144 } #[wasm_bindgen] pub fn feet_to_meters(feet: f64) -> f64 { feet * 0.3048 }
建置 WebAssembly 模組:
wasm-pack build --target web
這會產生必要的網路檔案。 現在,在 index.html
目錄中建立一個 yardandfeetconverter
檔案。 將以下程式碼貼到 index.html
中:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Yard and Feet to Meters Converter</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to right, #4facfe, #00f2fe); } .container { text-align: center; background: white; padding: 2rem; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } input, select, button { margin: 10px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #4facfe; color: white; cursor: pointer; } button:hover { background-color: #00c4cc; } </style> </head> <body> <div class="container"> <h1>Feet & Yards to Meters Converter</h1> <input type="number" id="value" placeholder="Enter value"> <select id="unit"> <option value="yards">Yards</option> <option value="feet">Feet</option> </select> <button id="convert">Convert</button> <p id="result"></p> </div> <script type="module"> import init, { yards_to_meters, feet_to_meters } from "./pkg/yardandfeetconverter.js"; async function setup() { await init(); document.getElementById('convert').addEventListener('click', () => { const value = parseFloat(document.getElementById('value').value); const type = document.getElementById('unit').value; let result; if (type === 'yards') { result = yards_to_meters(value); } else { result = feet_to_meters(value); } document.getElementById('result').innerText = `Result: ${result.toFixed(4)} meters`; }); } setup(); </script> </body> </html>
啟動本地網路伺服器(例如,使用Python的http.server
):
python -m http.server
開啟瀏覽器並導航至localhost:8000
。 現在您可以將英尺和碼轉換為米!
以上是英尺&碼 米 轉換器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章,請查看“以:focus-visible的管理用戶焦點”。在

本教程演示了使用智能表單框架創建外觀專業的JavaScript表單(注意:不再可用)。 儘管框架本身不可用,但原理和技術仍然與其他形式的建築商相關。

CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例,以及我們必須將這些樣式應用於WordPress塊和元素的選項。

本文探討了Envato Market上可用的PHP表單構建器腳本,比較了其功能,靈活性和設計。 在研究特定選項之前,讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式

Svelte Transition API提供了一種使組件輸入或離開文檔(包括自定義Svelte Transitions)時動畫組件的方法。
