Kaki&Lapangan ke penukar meter-tutorial css-php.cn

Rumah

tutorial css

Kaki&Lapangan ke penukar meter

Jan 21, 2025 pm 12:10 PM

Mari bina apl web penukar Feet & Yards to Meters yang ringkas menggunakan Rust dan WebAssembly! Panduan ini menyediakan pendekatan yang diperkemas.

Feet&Yard to meter converter

Pertama, pastikan Rust dipasang pada sistem anda. Muat turun dan pasang dari https://www.php.cn/link/29f81692d9af87c8826aafca8ff5dad3.

Seterusnya, buat projek Rust baharu menggunakan Kargo:

cargo new yardandfeetconverter

Salin selepas log masuk

Ubah suai fail Cargo.toml untuk memasukkan kebergantungan wasm-bindgen dan nyatakan jenis peti:

[dependencies]
wasm-bindgen = "0.2"

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

Salin selepas log masuk

Navigasi ke direktori src dan namakan semula main.rs kepada lib.rs. Gantikan kandungan lib.rs dengan logik penukaran ini:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn yards_to_meters(yards: f64) -&gt; f64 {
    yards * 0.9144
}

#[wasm_bindgen]
pub fn feet_to_meters(feet: f64) -&gt; f64 {
    feet * 0.3048
}

Salin selepas log masuk

Bina modul WebAssembly:

wasm-pack build --target web

Salin selepas log masuk

Ini menjana fail web yang diperlukan. Sekarang, buat fail index.html dalam direktori yardandfeetconverter. Tampalkan kod berikut ke dalam index.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Yard and Feet to Meters Converter&lt;/title&gt;
  &lt;style&gt;
    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;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Feet &amp; Yards to Meters Converter&lt;/h1&gt;
    &lt;input type="number" id="value" placeholder="Enter value"&gt;
    &lt;select id="unit"&gt;
      &lt;option value="yards"&gt;Yards&lt;/option&gt;
      &lt;option value="feet"&gt;Feet&lt;/option&gt;
    &lt;/select&gt;
    &lt;button id="convert"&gt;Convert&lt;/button&gt;
    &lt;p id="result"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script type="module"&gt;
    import init, { yards_to_meters, feet_to_meters } from "./pkg/yardandfeetconverter.js";

    async function setup() {
      await init();
      document.getElementById('convert').addEventListener('click', () =&gt; {
        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();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Mulakan pelayan web setempat (cth., menggunakan http.server Python):

python -m http.server

Salin selepas log masuk

Buka penyemak imbas anda dan navigasi ke localhost:8000. Anda kini boleh menukar kaki dan ela kepada meter!

Atas ialah kandungan terperinci Kaki&Lapangan ke penukar meter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn