Konverter von Fuß und Yard in Meter-CSS-Tutorial-php.cn

Konverter von Fuß und Yard in Meter

DDD

Freigeben： 2025-01-21 12:10:14

Original

665 Leute haben es durchsucht

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.

Feet&Yard to meter converter

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:

cargo new yardandfeetconverter

Nach dem Login kopieren

Ändern Sie die Cargo.toml-Datei so, dass sie die wasm-bindgen-Abhängigkeit enthält, und geben Sie den Crate-Typ an:

[dependencies]
wasm-bindgen = "0.2"

[lib]
crate-type = ["cdylib"]

Nach dem Login kopieren

Navigieren Sie zum Verzeichnis src und benennen Sie main.rs in lib.rs um. Ersetzen Sie den Inhalt von lib.rs durch diese Konvertierungslogik:

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
}

Nach dem Login kopieren

Erstellen Sie das WebAssembly-Modul:

wasm-pack build --target web

Nach dem Login kopieren

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:

ein

<!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>

Nach dem Login kopieren

Starten Sie einen lokalen Webserver (z. B. mit Pythons http.server):

python -m http.server

Nach dem Login kopieren

Ö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!