Maison >interface Web >tutoriel CSS >Convertisseur de pieds et de verges en mètres

Convertisseur de pieds et de verges en mètres

DDDoriginal: 2025-01-21 12:10:14698parcourir

Créons une simple application Web de conversion de pieds et de yards en mètres en utilisant Rust et WebAssembly ! Ce guide propose une approche simplifiée.

Feet&Yard to meter converter

Tout d’abord, assurez-vous que Rust est installé sur votre système. Téléchargez-le et installez-le depuis https://www.php.cn/link/29f81692d9af87c8826aafca8ff5dad3.

Ensuite, créez un nouveau projet Rust en utilisant Cargo :

<code class="language-bash">cargo new yardandfeetconverter</code>

Modifiez le fichier Cargo.toml pour inclure la dépendance wasm-bindgen et spécifiez le type de caisse :

<code class="language-toml">[dependencies]
wasm-bindgen = "0.2"

[lib]
crate-type = ["cdylib"]</code>

Accédez au répertoire src et renommez main.rs en lib.rs. Remplacez le contenu de lib.rs par cette logique de conversion :

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

Construisez le module WebAssembly :

<code class="language-bash">wasm-pack build --target web</code>

Cela génère les fichiers Web nécessaires. Maintenant, créez un fichier index.html dans le répertoire yardandfeetconverter. Collez le code suivant dans 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>

Démarrez un serveur Web local (par exemple, en utilisant http.server de Python) :

<code class="language-bash">python -m http.server</code>

Ouvrez votre navigateur et accédez à localhost:8000. Vous pouvez désormais convertir les pieds et les yards en mètres !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Python rust html include Directory using this web app http https wasm

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tailwind est la meilleure façon d’écrire du CSS !Article suivant：Tailwind est la meilleure façon d’écrire du CSS !

Articles Liés

Voir plus