Heim >Web-Frontend >CSS-Tutorial >Konverter von Fuß und Yard in Meter
Konverter von Fuß und Yard in Meter
- DDDOriginal
- 2025-01-21 12:10:14657Durchsuche
Lassen Sie uns eine einfache Web-App zum Konvertieren von Fuß und Yard in Meter mit Rust und WebAssembly erstellen! Dieser Leitfaden bietet einen optimierten Ansatz.
Stellen Sie zunächst sicher, dass Rust auf Ihrem System installiert ist. Laden Sie es herunter und installieren Sie es von https://www.php.cn/link/29f81692d9af87c8826aafca8ff5dad3.
Als nächstes erstellen Sie ein neues Rust-Projekt mit Cargo:
<code class="language-bash">cargo new yardandfeetconverter</code>
Ändern Sie die Cargo.toml-Datei so, dass sie die wasm-bindgen-Abhängigkeit enthält, und geben Sie den Crate-Typ an:
<code class="language-toml">[dependencies] wasm-bindgen = "0.2" [lib] crate-type = ["cdylib"]</code>
Navigieren Sie zum Verzeichnis src und benennen Sie main.rs in lib.rs um. Ersetzen Sie den Inhalt von lib.rs durch diese Konvertierungslogik:
<code class="language-rust">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
}</code>
Erstellen Sie das WebAssembly-Modul:
<code class="language-bash">wasm-pack build --target web</code>
Dadurch werden die erforderlichen Webdateien generiert. Erstellen Sie nun eine index.html-Datei im Verzeichnis yardandfeetconverter. Fügen Sie den folgenden Code in index.html:
<code class="language-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></code>
Starten Sie einen lokalen Webserver (z. B. mit Pythons http.server):
<code class="language-bash">python -m http.server</code>
Öffnen Sie Ihren Browser und navigieren Sie zu localhost:8000. Sie können jetzt Fuß und Yard in Meter umrechnen!
Das obige ist der detaillierte Inhalt vonKonverter von Fuß und Yard in Meter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!